@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200..1000;1,200..1000&display=swap);
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --color-primary: #761A80;
  --color-primarydark: #491B4B;
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #E9E8E8;
  --color-greyultralight: #F2F0F0;
  --color-greydark: #3C3935;
  --color-pink: #7d2082;
  --color-darkpink: #561659;
  --color-fucsia: #E7004C;
  --color-red: #D50032;
  --color-purple5: #4A134F;
  --color-vadefarma: #7A2682;
}

.font-hero {
  font-weight: 800;
  font-size: 61px;
  line-height: 110%;
  letter-spacing: -1.22px;
}
@media (max-width: 1024px) {
  .font-hero {
    font-size: 50px;
    line-height: 112%;
    letter-spacing: -1px;
  }
}
@media (max-width: 768px) {
  .font-hero {
    font-size: 42px;
    line-height: 115%;
    letter-spacing: -0.8px;
  }
}
@media (max-width: 640px) {
  .font-hero {
    font-size: 36px;
    line-height: 118%;
    letter-spacing: -0.6px;
  }
}

.font-M {
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: -0.88px;
}
@media (max-width: 1024px) {
  .font-M {
    font-size: 40px;
    line-height: 112%;
    letter-spacing: -0.7px;
  }
}
@media (max-width: 768px) {
  .font-M {
    font-size: 36px;
    line-height: 115%;
    letter-spacing: -0.5px;
  }
}
@media (max-width: 640px) {
  .font-M {
    font-size: 31px;
    line-height: 120%;
    letter-spacing: -0.4px;
  }
}

.font-S {
  font-weight: 400;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: -0.8px;
}
@media (max-width: 1024px) {
  .font-S {
    font-size: 32px;
    line-height: 122%;
    letter-spacing: -0.6px;
  }
}
@media (max-width: 768px) {
  .font-S {
    font-size: 28px;
    line-height: 124%;
    letter-spacing: -0.4px;
  }
}
@media (max-width: 640px) {
  .font-S {
    font-size: 28px;
    line-height: 124%;
    letter-spacing: -0.4px;
  }
}

.font-XS {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 120%;
  letter-spacing: 0;
}
@media (max-width: 1024px) {
  .font-XS {
    font-size: 24px;
    line-height: 122%;
    letter-spacing: 0;
  }
}
@media (max-width: 768px) {
  .font-XS {
    font-size: 22px;
    line-height: 124%;
    letter-spacing: 0;
  }
}
@media (max-width: 640px) {
  .font-XS {
    font-size: 22px;
    line-height: 126%;
    letter-spacing: 0;
  }
}

.font-L {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0.4px;
}
@media (max-width: 1024px) {
  .font-L {
    font-size: 18px;
    line-height: 142%;
    letter-spacing: 0.36px;
  }
}
@media (max-width: 768px) {
  .font-L {
    font-size: 16px;
    line-height: 144%;
    letter-spacing: 0.32px;
  }
}
@media (max-width: 640px) {
  .font-L {
    font-size: 16px;
    line-height: 144%;
    letter-spacing: 0.32px;
  }
}

.font-L-mobile {
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  line-height: 144%;
  letter-spacing: 0.32px;
}

.font-pretitle {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: 0em;
}

.font-M-small {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.32px;
}
@media (max-width: 640px) {
  .font-M-small {
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.32px;
  }
}

.font-mobile-M {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 31px;
  line-height: 110%;
  letter-spacing: 0%;
  text-align: center;
}

.font-mobile-base {
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 2%;
}

.font-subtitle {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 130%;
  letter-spacing: -0.48px;
}
@media (max-width: 1024px) {
  .font-subtitle {
    font-size: 22px;
    line-height: 132%;
    letter-spacing: -0.44px;
  }
}
@media (max-width: 768px) {
  .font-subtitle {
    font-size: 20px;
    line-height: 134%;
    letter-spacing: -0.4px;
  }
}
@media (max-width: 640px) {
  .font-subtitle {
    font-size: 18px;
    line-height: 136%;
    letter-spacing: -0.36px;
  }
}

.CTA-M {
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0.32px;
}
@media (max-width: 640px) {
  .CTA-M {
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.32px;
  }
}

.text-button, .text-button-decline {
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 2%;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background-color: var(--color-primary);
  color: var(--color-white);
  transition: background-color 0.2s;
  cursor: pointer;
}
.text-button:hover, .text-button-decline:hover {
  background-color: rgb(149.2623376623, 32.8883116883, 161.9116883117);
}
@media (max-width: 768px) {
  .text-button, .text-button-decline {
    font-size: 14px;
    padding: 0.65rem 1.3rem;
  }
}
@media (max-width: 640px) {
  .text-button, .text-button-decline {
    font-size: 13px;
    padding: 0.55rem 1.1rem;
  }
}

.text-button-decline {
  background-color: #F2F0F0;
  color: #3C3935;
}
.text-button-decline:hover {
  background-color: #E9E8E8;
}

.a-link:hover {
  color: rgb(149.2623376623, 32.8883116883, 161.9116883117);
}

.text-link {
  display: inline-block;
  /* necesario para que respete padding y border-radius */
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 2%;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  text-decoration: none;
  /* quitar subrayado */
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background-color: #761A80;
  color: white;
  transition: background-color 0.2s;
  cursor: pointer;
}
.text-link:hover {
  background-color: rgb(149.2623376623, 32.8883116883, 161.9116883117);
}
.text-link {
  /* Ajustes responsivos opcionales */
}
@media (max-width: 768px) {
  .text-link {
    font-size: 14px;
    padding: 0.65rem 1.3rem;
  }
}
@media (max-width: 640px) {
  .text-link {
    font-size: 13px;
    padding: 0.55rem 1.1rem;
  }
}

* {
  padding: 0;
  margin: 0;
}

*,
div {
  box-sizing: border-box;
}

html {
  /* 1rem = 10px */
}

body {
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  background-color: white;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

button {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.container {
  max-width: 164rem;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.container__bx {
  padding: 0 3rem;
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
}
@media (max-width: 767.98px) {
  .container__bx {
    flex-flow: column;
  }
}

button {
  cursor: pointer;
}

p {
  margin-bottom: 2rem;
}
p:last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

ul,
ol {
  padding-left: 2rem;
}

ul li {
  list-style: disc;
}

ol li {
  list-style: decimal;
}

strong,
b {
  font-weight: 700;
}

em {
  font-style: italic;
}

a {
  color: #3C3C3B;
  text-decoration: none;
}

code {
  background-color: #fff;
  padding: 2rem;
  font-family: monospace;
  border-radius: 1rem;
  margin-bottom: 2rem;
  display: block;
}

mark {
  background-color: #000;
  color: #fff;
}

pre {
  background-color: #fff;
  padding: 2rem;
  overflow-x: auto;
  border-radius: 1rem;
  margin-bottom: 2rem;
}

blockquote {
  color: #000;
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 700;
  text-align: center;
  padding: 4rem;
}
@media (width <= 767.98px) {
  blockquote {
    padding: 2rem;
  }
}

h1 {
  font-size: 36px;
  line-height: 5rem;
}
@media (width <= 767.98px) {
  h1 {
    font-size: 3rem;
    line-height: 4rem;
  }
}
h1 {
  margin-bottom: 5.5rem;
}

h2 {
  font-size: 3.6rem;
  line-height: 140%;
  margin-bottom: 4.6rem;
}

h3 {
  font-size: 3.2rem;
  line-height: 4.2rem;
  margin-bottom: 4.2rem;
}

h4 {
  font-size: 2.8rem;
  line-height: 3.8rem;
  margin-bottom: 3.8rem;
}

h5 {
  font-size: 2.4rem;
  line-height: 3.4rem;
  margin-bottom: 3.4rem;
}

h6 {
  font-size: 2rem;
  line-height: 3rem;
  margin-bottom: 3rem;
}

.mdl-content {
  padding: 8rem 0;
}
@media (width <= 767.98px) {
  .mdl-content {
    padding: 5rem 0;
  }
}
.mdl-content a {
  color: #7d2082;
}
.mdl-content a.hover {
  opacity: 0.6;
}
.mdl-content h1 {
  text-align: center;
  color: #7d2082;
}
.mdl-content h2 {
  margin-bottom: 2rem;
}
.mdl-content h1,
.mdl-content h2,
.mdl-content h3,
.mdl-content h4,
.mdl-content h5,
.mdl-content h6 {
  color: #7d2082;
}
.mdl-content ul,
.mdl-content ol {
  margin-bottom: 1rem;
}
.mdl-content ul li,
.mdl-content ol li {
  margin-bottom: 1rem;
}

.full {
  height: 650px !important;
}

.mdl-hero-sm {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
}
.mdl-hero-sm .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.mdl-hero-sm .hero-bg-desktop {
  display: block;
}
.mdl-hero-sm .hero-bg-mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .mdl-hero-sm .hero-bg-desktop {
    display: none;
  }
  .mdl-hero-sm .hero-bg-mobile {
    display: block;
  }
}
.mdl-hero-sm::after {
  content: "";
  background-color: #000;
  opacity: 0;
  z-index: 8;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mdl-hero-sm .container {
  position: relative;
  z-index: 9;
}

.mdl-hero-sm {
  position: relative;
}
.mdl-hero-sm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(47, 46, 46, 0.0235294118) 0%, #1D1D1B 100%);
  opacity: 0.6;
  z-index: 1;
}
.mdl-hero-sm .container {
  position: relative;
  z-index: 11;
}
.mdl-hero-sm .container .container__bx .inverse {
  justify-items: left;
  text-align: left;
  margin-left: 20px;
  display: grid;
}
.mdl-hero-sm .container .container__bx .inverse .description {
  font-size: 20px;
}
@media (width <= 767.98px) {
  .mdl-hero-sm .container .container__bx .inverse {
    justify-items: left;
    text-align: left;
    margin-left: 20px;
  }
  .mdl-hero-sm .container .container__bx .inverse .description {
    text-align: left;
  }
}
.mdl-hero-sm .container .container__bx .normal {
  justify-items: left;
  display: grid;
}
.mdl-hero-sm .container .container__bx .normal .description {
  max-width: 400px;
}
.mdl-hero-sm .container .logo {
  width: 327px;
  align-self: center;
  transform: translateY(-30px);
}
.mdl-hero-sm .container .title {
  line-height: 40px;
  margin-top: 20px;
  font-size: 80px;
  font-weight: 700;
  color: white;
  margin-bottom: 20px;
  word-break: keep-all;
}
.mdl-hero-sm .container .description {
  font-size: 32px;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
  color: white;
  text-align: left;
  justify-self: left;
}
@media (width <= 767.98px) {
  .mdl-hero-sm .container .description {
    font-size: 26px;
    justify-self: center;
    text-align: center;
  }
}
.mdl-hero-sm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #2f2e2e 50%, #1D1D1B 100%);
  opacity: 0.3;
  z-index: 1;
}
@media (max-width: 1200px) {
  .mdl-hero-sm .container {
    margin-left: 0;
    padding: 0 20px;
  }
  .mdl-hero-sm .container .title {
    line-height: 70px;
    font-size: 70px;
    margin-bottom: 30px;
  }
}
@media (max-width: 1200px) and (max-width: 991.98px) {
  .mdl-hero-sm .container .title {
    font-size: 60px !important;
  }
}
@media (max-width: 1200px) and (max-width: 767.98px) {
  .mdl-hero-sm .container .title {
    font-size: 48px !important;
  }
}

.mdl-hero-carousel {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
}
.mdl-hero-carousel .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.mdl-hero-carousel .hero-bg-desktop {
  display: block;
}
.mdl-hero-carousel .hero-bg-mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .mdl-hero-carousel .hero-bg-desktop {
    display: none;
  }
  .mdl-hero-carousel .hero-bg-mobile {
    display: block;
  }
}
.mdl-hero-carousel .carousel {
  position: relative;
  width: 100%;
  height: 100%;
}
.mdl-hero-carousel .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.6s ease-in-out;
  z-index: 0;
  transform: translateX(0);
}
.mdl-hero-carousel .carousel-slide.active {
  opacity: 1;
  z-index: 1;
  transform: translateX(0);
}
.mdl-hero-carousel .carousel-slide.left {
  transform: translateX(-100%);
  opacity: 1;
}
.mdl-hero-carousel .carousel-slide.right {
  transform: translateX(100%);
  opacity: 1;
}
.mdl-hero-carousel .carousel-slide.exiting {
  opacity: 1;
  z-index: 1;
  transition: all 0.6s ease-in-out;
  transform: translateX(0);
}
.mdl-hero-carousel .carousel-slide .mdl-hero-sm {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
@media (max-width: 767.98px) {
  .mdl-hero-carousel .carousel-slide .mdl-hero-sm {
    background-position: 30% center;
  }
}
.mdl-hero-carousel .carousel-slide .container__bx {
  color: #fff;
}
.mdl-hero-carousel .carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("/imgs/demo/arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 100;
  width: 46px;
  height: 46px;
  cursor: pointer;
}
.mdl-hero-carousel .carousel-control.prev {
  left: 20px;
  transform: translateY(-50%) rotate(180deg);
}
.mdl-hero-carousel .carousel-control.next {
  right: 20px;
}

/* ========================================
   ESTILOS PARA PÁGINAS BÁSICAS - VADEFARMA
   ======================================== */
.page-copyright .container__bx,
.page-legal_notice .container__bx,
.page-cookies .container__bx,
.page-system_information .container__bx,
.page-data_protection_policy .container__bx {
  background-color: white;
  padding: 3rem 2rem;
  border-left: 4px solid #7d2082;
}
@media (width <= 767.98px) {
  .page-copyright .container__bx,
  .page-legal_notice .container__bx,
  .page-cookies .container__bx,
  .page-system_information .container__bx,
  .page-data_protection_policy .container__bx {
    padding: 2rem 1.5rem;
  }
}
@media (width <= 480px) {
  .page-copyright .container__bx,
  .page-legal_notice .container__bx,
  .page-cookies .container__bx,
  .page-system_information .container__bx,
  .page-data_protection_policy .container__bx {
    padding: 1.5rem 1rem;
  }
}
.page-copyright h1,
.page-legal_notice h1,
.page-cookies h1,
.page-system_information h1,
.page-data_protection_policy h1 {
  color: #7d2082;
  font-size: clamp(2rem, 4vw, 2.5rem);
  margin-bottom: 2rem;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 1rem;
  text-align: left;
  line-height: 1.3;
}
@media (width <= 480px) {
  .page-copyright h1,
  .page-legal_notice h1,
  .page-cookies h1,
  .page-system_information h1,
  .page-data_protection_policy h1 {
    margin-bottom: 1.5rem;
  }
}
.page-copyright h2,
.page-legal_notice h2,
.page-cookies h2,
.page-system_information h2,
.page-data_protection_policy h2 {
  color: #4C0555;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}
@media (width <= 480px) {
  .page-copyright h2,
  .page-legal_notice h2,
  .page-cookies h2,
  .page-system_information h2,
  .page-data_protection_policy h2 {
    margin-top: 1.5rem;
  }
}
.page-copyright h3,
.page-legal_notice h3,
.page-cookies h3,
.page-system_information h3,
.page-data_protection_policy h3 {
  color: #7d2082;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.page-copyright p,
.page-legal_notice p,
.page-cookies p,
.page-system_information p,
.page-data_protection_policy p {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #333;
}
@media (width <= 767.98px) {
  .page-copyright p,
  .page-legal_notice p,
  .page-cookies p,
  .page-system_information p,
  .page-data_protection_policy p {
    line-height: 1.7;
  }
}
@media (width <= 480px) {
  .page-copyright p,
  .page-legal_notice p,
  .page-cookies p,
  .page-system_information p,
  .page-data_protection_policy p {
    margin-bottom: 1.2rem;
    line-height: 1.65;
  }
}
.page-copyright ul,
.page-copyright ol,
.page-legal_notice ul,
.page-legal_notice ol,
.page-cookies ul,
.page-cookies ol,
.page-system_information ul,
.page-system_information ol,
.page-data_protection_policy ul,
.page-data_protection_policy ol {
  margin-left: 2rem;
  margin-bottom: 1.5rem;
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  line-height: 1.8;
}
@media (width <= 767.98px) {
  .page-copyright ul,
  .page-copyright ol,
  .page-legal_notice ul,
  .page-legal_notice ol,
  .page-cookies ul,
  .page-cookies ol,
  .page-system_information ul,
  .page-system_information ol,
  .page-data_protection_policy ul,
  .page-data_protection_policy ol {
    margin-left: 1.5rem;
    line-height: 1.7;
  }
}
@media (width <= 480px) {
  .page-copyright ul,
  .page-copyright ol,
  .page-legal_notice ul,
  .page-legal_notice ol,
  .page-cookies ul,
  .page-cookies ol,
  .page-system_information ul,
  .page-system_information ol,
  .page-data_protection_policy ul,
  .page-data_protection_policy ol {
    margin-left: 1rem;
    line-height: 1.65;
    margin-bottom: 1.2rem;
  }
}
.page-copyright li,
.page-legal_notice li,
.page-cookies li,
.page-system_information li,
.page-data_protection_policy li {
  margin-bottom: 0.5rem;
}
@media (width <= 480px) {
  .page-copyright li,
  .page-legal_notice li,
  .page-cookies li,
  .page-system_information li,
  .page-data_protection_policy li {
    margin-bottom: 0.4rem;
  }
}
.page-copyright strong,
.page-legal_notice strong,
.page-cookies strong,
.page-system_information strong,
.page-data_protection_policy strong {
  color: #7d2082;
  font-weight: 600;
}
.page-copyright .table-wrapper,
.page-legal_notice .table-wrapper,
.page-cookies .table-wrapper,
.page-system_information .table-wrapper,
.page-data_protection_policy .table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  margin: 2rem 0;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}
@media (width <= 767.98px) {
  .page-copyright .table-wrapper,
  .page-legal_notice .table-wrapper,
  .page-cookies .table-wrapper,
  .page-system_information .table-wrapper,
  .page-data_protection_policy .table-wrapper {
    max-width: calc(100vw - 6rem);
  }
}
@media (width <= 480px) {
  .page-copyright .table-wrapper,
  .page-legal_notice .table-wrapper,
  .page-cookies .table-wrapper,
  .page-system_information .table-wrapper,
  .page-data_protection_policy .table-wrapper {
    margin: 1.5rem 0;
    border-radius: 0;
    max-width: calc(100vw - 2rem);
  }
}
.page-copyright .table-wrapper,
.page-legal_notice .table-wrapper,
.page-cookies .table-wrapper,
.page-system_information .table-wrapper,
.page-data_protection_policy .table-wrapper {
  background: linear-gradient(90deg, white 30%, rgba(255, 255, 255, 0)), linear-gradient(90deg, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
@media (width <= 480px) {
  .page-copyright .table-wrapper::after,
  .page-legal_notice .table-wrapper::after,
  .page-cookies .table-wrapper::after,
  .page-system_information .table-wrapper::after,
  .page-data_protection_policy .table-wrapper::after {
    content: "← Desliza para ver más →";
    display: block;
    text-align: center;
    font-size: 1.1rem;
    color: #999;
    padding: 0.5rem;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
  }
}
.page-copyright table,
.page-legal_notice table,
.page-cookies table,
.page-system_information table,
.page-data_protection_policy table {
  width: 100%;
  min-width: 600px;
  margin: 0;
  border-collapse: collapse;
  display: table;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}
@media (width <= 767.98px) {
  .page-copyright table,
  .page-legal_notice table,
  .page-cookies table,
  .page-system_information table,
  .page-data_protection_policy table {
    min-width: 600px;
  }
}
@media (width <= 768px) {
  .page-copyright table,
  .page-legal_notice table,
  .page-cookies table,
  .page-system_information table,
  .page-data_protection_policy table {
    min-width: 650px;
  }
}
@media (width <= 480px) {
  .page-copyright table,
  .page-legal_notice table,
  .page-cookies table,
  .page-system_information table,
  .page-data_protection_policy table {
    min-width: 600px;
  }
}
.page-copyright table th,
.page-legal_notice table th,
.page-cookies table th,
.page-system_information table th,
.page-data_protection_policy table th {
  background-color: #7d2082;
  color: white;
  padding: 1rem;
  text-align: left;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  white-space: nowrap;
}
@media (width <= 767.98px) {
  .page-copyright table th,
  .page-legal_notice table th,
  .page-cookies table th,
  .page-system_information table th,
  .page-data_protection_policy table th {
    padding: 0.75rem 0.6rem;
  }
}
@media (width <= 480px) {
  .page-copyright table th,
  .page-legal_notice table th,
  .page-cookies table th,
  .page-system_information table th,
  .page-data_protection_policy table th {
    padding: 0.6rem 0.5rem;
    font-size: 1.2rem;
  }
}
.page-copyright table td,
.page-legal_notice table td,
.page-cookies table td,
.page-system_information table td,
.page-data_protection_policy table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  word-wrap: break-word;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.6;
}
@media (width <= 767.98px) {
  .page-copyright table td,
  .page-legal_notice table td,
  .page-cookies table td,
  .page-system_information table td,
  .page-data_protection_policy table td {
    padding: 0.75rem 0.6rem;
  }
}
@media (width <= 480px) {
  .page-copyright table td,
  .page-legal_notice table td,
  .page-cookies table td,
  .page-system_information table td,
  .page-data_protection_policy table td {
    padding: 0.6rem 0.5rem;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}
.page-copyright table tr:hover,
.page-legal_notice table tr:hover,
.page-cookies table tr:hover,
.page-system_information table tr:hover,
.page-data_protection_policy table tr:hover {
  background-color: #fafafa;
}
@media (width <= 480px) {
  .page-copyright table thead,
  .page-legal_notice table thead,
  .page-cookies table thead,
  .page-system_information table thead,
  .page-data_protection_policy table thead {
    display: table-header-group;
  }
  .page-copyright table tbody,
  .page-legal_notice table tbody,
  .page-cookies table tbody,
  .page-system_information table tbody,
  .page-data_protection_policy table tbody {
    display: table-row-group;
  }
  .page-copyright table tr,
  .page-legal_notice table tr,
  .page-cookies table tr,
  .page-system_information table tr,
  .page-data_protection_policy table tr {
    display: table-row;
  }
  .page-copyright table th, .page-copyright table td,
  .page-legal_notice table th,
  .page-legal_notice table td,
  .page-cookies table th,
  .page-cookies table td,
  .page-system_information table th,
  .page-system_information table td,
  .page-data_protection_policy table th,
  .page-data_protection_policy table td {
    display: table-cell;
  }
}
.page-copyright code,
.page-legal_notice code,
.page-cookies code,
.page-system_information code,
.page-data_protection_policy code {
  background-color: #f5f5f5;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  color: #7d2082;
  font-size: 1.4rem;
}

/* ========================================
   BOTÓN FIJO MOBILE - SOLICITA MÁS INFORMACIÓN
   ======================================== */
.fixed-mobile-button {
  position: fixed;
  /* Fallback para navegadores sin env() o max() support */
  bottom: 20px;
  /* Usar max() y env() para dispositivos con notch/safe-area */
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  /* Safe area para landscape con notch */
  left: max(20px, env(safe-area-inset-left, 0px));
  right: max(20px, env(safe-area-inset-right, 0px));
  width: auto;
  /* Fallback para calc() */
  max-width: calc(100vw - 40px);
  margin: 0 auto;
  height: 42.08px;
  padding: 0 23.08px;
  background-color: #7A2682;
  color: white;
  font-weight: 600;
  font-size: 16px;
  border-radius: 23.08px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999; /* Aumentado para estar sobre modales y cookies */
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.15s ease;
  text-decoration: none;
  display: none; /* Oculto por defecto */
  opacity: 1;
  contain: layout style paint; /* Optimización CSS: contiene cambios */
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
@media (max-width: 767.98px) {
  .fixed-mobile-button {
    display: flex; /* Solo visible en mobile */
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
.fixed-mobile-button:hover {
  background-color: rgb(84.9642857143, 26.4642857143, 90.5357142857);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.fixed-mobile-button:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}
.fixed-mobile-button:focus:not(:focus-visible) {
  outline: none;
}
.fixed-mobile-button:active {
  opacity: 0.8;
  transform: scale(0.98);
}
.fixed-mobile-button.hidden-button {
  opacity: 0;
  pointer-events: none;
}

/* ========================================
   LINK CON HOVER PRIMARY
   ======================================== */
.link-hover-primary {
  color: var(--color-greydark);
  transition: color 0.3s ease;
}
.link-hover-primary:hover {
  color: var(--color-primary);
}

.header {
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #F5F5F7;
  z-index: 999;
}
@media (width <= 767.98px) {
  .header {
    height: 8rem;
  }
}
.header .container__bx {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}
@media (width <= 1199.98px) {
  .header .container__bx {
    align-items: flex-start;
  }
}
.header__col {
  display: flex;
  flex-flow: row;
  padding-left: 1.8rem;
}
.header {
  /*   &__menu{
      @media(width <= $xl){
        display: none;
      }
    } */
}
.header .logo {
  max-width: 22.2rem;
}
@media (width <= 1199.98px) {
  .header .logo {
    padding: 2rem 0;
  }
}
@media (width <= 767.98px) {
  .header .logo {
    max-width: 16rem;
  }
}
.header__it--sup {
  background-color: #fff;
  border-radius: 0 0 1.6rem 1.6rem;
  padding: 2rem 5rem 2.2rem;
}
.header__it--inf {
  padding: 2rem 0rem 2.2rem;
  font-weight: 400;
}
.header__info {
  margin-left: 1.8rem;
  display: flex;
  flex-flow: column;
  align-items: center;
}
@media (width <= 1199.98px) {
  .header__info {
    flex-flow: row;
    margin: 0;
  }
}
@media (width <= 1199.98px) {
  .header__info .lang-sel {
    display: none;
  }
}

.btn-cloud {
  width: 13.5rem;
  height: 8.2rem;
  border-radius: 0 0 1.5rem 1.5rem;
  background: #7d2082;
  font-family: "Nunito Sans", sans-serif;
  font-weight: bold;
  font-size: 13px;
  text-align: left;
  color: #fff;
  background-image: url("../imgs/icons/icon-cloud.png");
  background-size: 3.6rem;
  background-repeat: no-repeat;
  background-position: center bottom 37px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 1rem;
  box-sizing: border-box;
}
@media (width <= 1199.98px) {
  .btn-cloud {
    width: 10rem;
    height: 6rem;
    background-size: 2rem;
  }
}

.menu ul {
  display: flex;
  flex-flow: row;
  padding: 0;
  justify-content: flex-end;
  gap: 4rem;
  text-align: center;
}
@media (width <= 767.98px) {
  .menu ul {
    gap: 2rem;
  }
}
.menu ul li {
  padding: 0 0.8rem;
  position: relative;
  list-style: none;
  margin: auto;
}
.menu ul li.has-child > a:after {
  content: "";
  background-image: url("../imgs/chevron-down-solid.svg");
  background-repeat: no-repeat;
  background-size: 1.4rem;
  background-position: right center;
  display: inline-block;
  width: 20px;
  height: 11px;
}
.menu ul li.has-child:hover > .submenu {
  display: flex;
}
> a .menu ul li.has-child:hover:after {
  transform: rotate(180deg);
  transition: 0.4s ease;
}
.menu ul li.selected a {
  font-weight: 700;
  color: #761A80;
  text-decoration: none;
  border-bottom: 2px solid #761A80;
  padding-bottom: 4px;
}
.menu ul li a {
  text-decoration: none;
  display: block;
  color: #3C3935;
}
.menu ul li ul.submenu {
  flex-flow: column;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  padding: 0 1rem;
  width: 100%;
  transform: translateX(-2rem);
  padding-top: 4rem;
  z-index: 9;
  padding-bottom: 1rem;
  gap: 1rem;
  width: 32rem;
}
.menu ul li ul.submenu li {
  padding: 0 2rem 1rem;
  width: 100%;
  display: block;
  text-align: left;
}
.menu ul li ul.submenu li a {
  font-weight: 400;
  color: #3C3935;
}
.menu ul li ul.submenu li.selected > a {
  font-weight: 700;
  color: #7d2082;
}
.menu ul li ul.submenu li.has-child > a:after {
  content: "";
  background-image: url("../imgs/chevron-right-solid.svg");
  background-repeat: no-repeat;
  background-size: 0.8rem;
  background-position: right center;
  display: inline-block;
  width: 20px;
  height: 11px;
}

.m-hamb {
  width: 100%;
  height: auto;
  max-height: 100vh;
  z-index: 99;
  position: fixed;
  background-color: #F5F5F7;
  top: 0;
  padding-top: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.4s, opacity 0.3s ease;
}
@media (max-width: 1199.98px) {
  .m-hamb {
    display: block;
  }
}
.m-hamb .mobile-menu-content {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.m-hamb.js-open {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 0.3s ease;
}
.m-hamb.js-open .mobile-menu-content {
  transform: scaleY(1);
}
.m-hamb .header__it {
  padding: 4rem 2rem;
  height: calc(100% - 8rem);
}
.m-hamb .header__it--sup {
  border-radius: 0 1.6rem 1.6rem 0;
}
.m-hamb .menu {
  text-align: left;
}
.m-hamb .menu ul {
  flex-flow: column;
}
.m-hamb .menu ul li {
  padding: 0;
}
.m-hamb .menu ul li a {
  text-align: left;
}
.m-hamb .menu ul li ul.submenu {
  position: relative;
  left: auto;
  top: auto;
  padding: 1rem 0 0 2rem;
  width: auto;
}
.m-hamb .menu ul li ul.submenu li ul.submenu {
  position: relative;
  left: auto;
  top: auto;
}

.lang-sel {
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  color: #7d2082;
  padding-top: 3.5rem;
}
@media (width <= 1199.98px) {
  .lang-sel {
    padding-top: 0;
    margin-left: 1.8rem;
    height: 8rem;
  }
}
.lang-sel img {
  max-width: 1.8rem;
  margin-right: 1rem;
}
.lang-sel__current {
  padding-right: 1rem;
  pointer-events: none;
  font-weight: 700;
}
.lang-sel__item {
  color: #7d2082;
}

.header-wrapper {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 1199px) {
  .header-wrapper {
    width: 50%;
  }
}

.header__it--sup {
  background-color: white;
  padding-right: 1rem;
}
@media (max-width: 1199px) {
  .header__it--sup {
    max-width: 100%;
    width: 100%;
  }
}

.header__info-mobile {
  display: none;
  align-items: center;
}
@media (max-width: 1199px) {
  .header__info-mobile {
    display: flex;
  }
}

.header__info {
  padding-left: 1rem;
  display: flex;
}
@media (max-width: 1199px) {
  .header__info {
    display: none;
  }
}

.menu ul {
  gap: 0;
}

/* .footer{
    padding: 7rem 0;
    background-color: $darkpink;
    color: $white;
    font-size: 1.8rem;
    line-height: 2.4rem;

    .logo{
        max-width: 22rem;
        margin-bottom: 2rem;
    }

    .container{
        &__bx{
            flex-flow: row wrap;
            justify-content: space-between;
            gap: 2rem;

            @media(width <= $md){
                flex-flow: column;
            }
        }
    }

    &__it{

        @media(width <= $xl){
            width: calc(30% - 2rem);
        }

        @media(width <= $lg){
            width: calc(50% - 2rem);
        }

        @media(width <= $md){
            width: 100%;
        }

        h3{
            color: $white;
            font-size: 1.8rem;
            line-height: 2.4rem;
            margin-bottom: 1.5rem;
        }

        ul{
            padding: 0;

            li{
                list-style: none;
                margin-bottom: 1.5rem;

                a{
                    color: $white;
                }
            }
        }
    }
}
 */
.btn {
  border: 0;
  width: 100%;
  max-width: 23.2rem;
  height: 5.8rem;
  border-radius: 2.9rem;
  background: #fff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 2.6rem;
  text-align: center;
  color: #7d2082;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn--color {
  background-color: #7d2082;
  color: #fff;
}
.btn--grey {
  background: #3C3935;
  color: #fff;
}

.btn-info {
  max-width: 5.4rem;
  background-image: url("../imgs/icons/plus.png");
  height: 5.4rem;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 5.4rem;
}
.btn-info.js-show {
  max-width: 5.4rem;
  background-image: url("../imgs/icons/minus.png");
}

/* .decoration-background {
    position: relative;
    background-color: #F7F7F1;
    z-index: 0;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../imgs/home/decoration-transparent.png');
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.3;
        z-index: -1;
    }
}

.mdl-distribution {


    &--intro {
        background-color: $white;
        padding-top: 8rem;
        padding-bottom: 1rem;
        & .dist-tit {
           h1,h2,h3,h4,h5,h6{
            color: $greydark;
            font-weight: 300;
           }
            h3 {
                margin-bottom: 0;
            }
        }


    }
    & .dist-tit {
        h3 {
            font-size: 26px;
        }
        font-size: 26px;
        line-height: 5rem;
        font-weight: 300;
        color: $greydark;
    }
    & .dist-txt {
        font-size: 20px;
        color: $black;
        line-height: 140%;
        font-weight: 300;
    }
    .video-bx {
        display: flex;
        justify-content: center;
        align-items: center;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 3.7rem;
        width: 100%;
        height: 100%;
        @media(width <= $md){
            padding-top: 5rem;
            padding-bottom: 5rem;
            margin-top: 2rem;
        }
        &--hg {
            min-height: 90rem;
            @media(width <= $md){
                min-height: 60rem;
            }
        }
        & .video-ic {
            width: 11.5rem;
            @media(width <= $md){
                width: 9.5rem;
            }
        }
    }

    .container{
        &__bx{
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
        }
    }
    .dist-imgbx {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 12px;
        height: 630px;
        overflow: hidden;
        @media(width <= $md){
            padding-top: 56%;
        }
        &--nobg {
            @media(width <= $md){
                padding-top: 0;
                margin-bottom: 5rem;
            }
        }
    }


    .dist-cl {
        max-width: 1068px;
        margin-bottom: 1rem;
        display: grid;
        &--50 {
            width: 50%;
            @media(width <= $md){
                width: 100%;
            }
        }
        &--100 {
            width: 100%;
            text-align: center;
            justify-items: center;
        }

        &--pd {
            padding: 4rem 4rem;
            @media(width <= $xxl){
                padding: 5rem;
            }
            @media(width <= $md){
                padding: 0;
            }
        }
        &--ct {
            text-align: left;
        }

        &--inverse {
            text-align: right;
        }

        &--int {
            padding: 15rem 6rem 15rem 0;
            @media(width <= $md){
                padding: 5rem 0 5rem 0;
            }
        }
    }
    &--cnt {
        @media(width <= $md){
            .dist-cl--pd {
                padding: 0;
                order: 2;
            }
        }
    }
    .dist-logo {
        justify-self: left;
        min-width: 320px;
        max-width: 320px;
        margin-bottom: 6rem;
        @media(width <= $md){
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
    }
    & .dist-bt {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 2.5rem;
        color: $white;
        width: fit-content;
        border-radius: 12px;
        font-size: 16px;
        line-height: 3.3srem;
        height: 5.8rem;
        margin-top: 6rem;
    }

    .right {
        justify-self: right;
    }

    &--fedefarma {
        padding-top: 8rem;
        & .dist-tit {
            margin-bottom: 12px !important;
            font-size: 26px;
            line-height: 120%;
            color: $pink;
        }
        & .dist-bt {
            background-color: $pink;
        }
    }
    &--actibios {
        & .dist-tit {
            margin-bottom: 12px !important;
            font-size: 26px;
            line-height: 120%;
            color: #04B696;
        }
        & .dist-bt {
            background-image: linear-gradient(to right, #212C5B , #3BC06F);
        }
        .dist-logo {
        justify-self: right;
        }
    }
    &--acofarma {
        padding-bottom: 8rem;
        & .dist-tit {
            margin-bottom: 12px !important;
            font-size: 26px;
            line-height: 120%;
            color: #D50032;
        }
        & .dist-bt {
            background-image: linear-gradient(to right, #6A2C3E , #D50032);
        }
    }
    .imgbx {
        border-radius: 3.7rem;
        overflow: hidden;
    }
    &--int {
        padding: 13rem 0 0 0;
        @media(width <= $md){
            padding: 5rem 0 0 0;
        }
       .dist-cl--rt {
            & .dist-tit {
                color: $pink;
            }
       }
    }
    &--acofarma-int {
        padding: 7.4rem 0;
        background-color: rgba(#D50032,.03);
        .dist-logo {
            margin: 0 auto 6.2rem;
            max-width: 51rem;
        }
        & .dist-tit {
            color: $pink;
        }
        & .dist-bt {
            background-color: $red;
        }
    }
    & .dist-cls {
        width: 100%;
        max-width: 138rem;
        margin: 4.5rem auto 0;
        padding-bottom: 2.1rem;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
    }
    .dist-it {
        width: 50%;
        padding: 0 .8rem;
        @media(width <= $md){
            width: 100%;
        }
    }
    .dist-it-tit {
        font-size: 4.5rem;
        line-height: 3.5rem;
        font-weight: 800;
        color: $fucsia;
    }
    .dist-grad {
        margin-top: 2rem;
        padding: 1.8rem;
        background-image: linear-gradient(to right, #D50032 , #6B0019);
        text-align: center;
        border-radius: 3.7rem;
        font-size: 4.5rem;
        line-height: 5rem;
        font-weight: 800;
        color: $white;
        @media(width <= $md){
            margin-bottom: 4rem;
        }
        & strong, & b {
            font-size: 12rem;
            line-height: 12rem;
        }
    }
    .dist-map {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        margin-top: 10rem;
        margin-bottom: 18.7rem;
        @media(width <= $md){
            margin-top: 5rem;
            margin-bottom: 5rem;
        }
        &__lt {
            width: 70%;
            border-radius: 3.7rem;
            overflow: hidden;
            @media(width <= $md){
                width: 100%;
                margin-bottom: 5rem;
            }
        }
        &__rt {
            padding: 0 7.2rem;
            width: 30%;
            font-size: 4.5rem;
            line-height: 5rem;
            font-weight: 800;
            color: $pink;
            @media(width <= $md){
                width: 100%;
                padding: 0;
            }
        }
        & hr {
            content: "";
            border-bottom: 1px solid $pink;
            margin: 5.2rem 0;
        }
    }
    &--not {
        padding: 7.5rem 0 0 0;
        margin-bottom: 6rem;
        & .dist-tit {
            color: $pink;
        }
        & .dist-txt {
            font-size: 20px;
            color: $black;
            line-height: 140%;
            max-width: 73rem;
            margin: 0 auto;
        }
        & .dist-not {
            margin-top: 6rem;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 1.6rem;
            @media(width <= $md){
              grid-template-columns: repeat(1,1fr);
            }
            &__cl {
                margin-bottom: 3rem;
            }
            &__img {
                padding-bottom: 70%;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: 3.7rem;
            }
            &__tit {
                margin-top: 4rem;
                font-size: 4.5rem;
                line-height: 5rem;
                font-weight: 800;
                color: $greydark;
            }
        }
    }

    &__video{
        width: 100%;
        height: 60rem;

        video{
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 1;
            -o-object-fit: cover;
            object-fit: cover;
        }
    }
}

.mdl-distribution-list{
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 3.2rem;
    color: $greydark;
    padding: 12rem 0 8rem;

    &__bx{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 4rem;

        @media(width <=$md){
            grid-template-columns: repeat(1,1fr);
        }
    }

    &__tit{
        border-radius: 52px;
        background: #aa187b;
        min-height: 8rem;
        padding: 1rem 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 4.5rem;

        h2{
            font-size: 3.2rem;
            line-height: 4.2rem;
            text-align: center;
            color: $white;
            margin: 0;
        }
    }

    &__txt{
        padding: 0 4rem;

        p,
        li{
            font-weight: 300;
            font-size: 2.2rem;
            line-height: 3.2rem;
            color: $greydark;
        }

        ul{
            padding: 0;

            li{
                list-style: none;
                position: relative;
                padding-left: 4rem;
                padding-bottom: 2rem;

                &::after{
                    content: '';
                    width: 2.2rem;
                    height: 2.2rem;
                    border-radius: 50%;
                    display: block;
                    background-color: $pink;
                    position: absolute;
                    left: 0;
                    top: 0.5rem;
                }
            }
        }
    }
}

.logo-grid {
    padding: 0rem 0 2rem;
    background-color: white;

    .logo-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
        margin-bottom: 1.5rem;
        align-items: center;
    }

    .logo {
        width: auto;
        object-fit: contain;
        max-height: 130px;
    }

    .logo--vadefarma { max-height: 44px; }
    .logo--cofano    { max-height: 112px; }
    .logo--novaltia  { max-height: 44px; }
    .logo--nafarco   { max-height: 123px; }
    .logo--cofas     { max-height: 111px; }
    .logo--dfg       { max-height: 90px; }
    .logo--cofarle   { max-height: 143px; }
    .logo--cofarme   { max-height: 110px; }
    .logo--fedefarma { max-height: 74px; }
}


.cards-row {
    padding: 46px 0;
    background-color: white;

    .card-container {
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .card {
        display: grid;
        background-color: #7D2082;
        color: #FFFFFF;
        text-align: center;
        padding: 20px;
        max-width: 314px;
        height: 314px;
        flex: 1 1 250px;
        border-radius: 24px;
        justify-items: center;

        .card-image {
            height: 90px;
            width: auto;
            margin-top: 3rem;
            margin-bottom: 1rem;
        }

        .card-title {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .card-subtitle {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        span {
            margin-top: 1.5rem;
        }
        .card-icon-placeholder {
            width: 36px;
            height: 36px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.2); // subtle placeholder look
            border-radius: 50%;
        }

        .card-decoration {
            height: 36px;
            width: 36px;
        }
    }
}

.decoration {
    margin-top: 0;
    margin-bottom: 0;
}
 */
/* .mdl-government {
    &--intro {
        padding: 12.9rem 0 7rem;
    }
    & .gov-tit {
        @include title1;
        color: $greydark;
    }
    & .gov-txt {
        font-size: 2.8rem;
        line-height: 3.5rem;
        font-weight: 300;
        color: $greydark;
    }
    .container{
        &__bx{
            display: flex;
            flex-flow: row wrap;
        }
    }
    .gov-cl {
        margin-bottom: 3.8rem;
        &--50 {
            width: 50%;
            @media(width <= $md){
                width: 100%;
            }
        }
        &--pd {
            padding: 5rem 7.4rem;
            @media(width <= $md){
                padding: 1rem 0;
                order: 1;
            }
        }
        &--ct {
            text-align: center;
        }
    }
    &--cnt {
        background-color: $grey;
    }
    .gov-imgbx {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 3.7rem;
        height: 100%;
        overflow: hidden;
        @media(width <= $md){
            padding-top: 70%;
        }
    }
    .gov-h2 {
        width: 100%;
        text-align: center;
        @include title1;
        color: $greydark;
        margin-top: 8rem;
        margin-bottom: 8rem;
    }
    .gov-grd {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 10rem 14%;
        margin-bottom: 7rem;
        width: 100%;

        @media(width <= $md){
            grid-template-columns: repeat(1,1fr);
            gap: 5rem 0;
        }
        &__it {
            margin: 0 auto;
            text-align: center;
            width: 100%;
            min-width: 18rem;
            max-width: 35rem;
        }
        &__img {
            width: 100%;
            padding-top: 90%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 3.7rem;
            overflow: hidden;
            margin-bottom: 3.5rem;
        }
        &__name {
            font-size: 2.8rem;
            line-height: 3.5rem;
            color: $pink;
            font-weight: 300;
            margin-bottom: 0;
        }
        &__tit {
            font-size: 2.8rem;
            line-height: 3.5rem;
            color: $greydark;
            font-weight: 700;
            margin-bottom: 0;
        }
        &__txt {
            font-size: 2.8rem;
            line-height: 3.5rem;
            color: $greydark;
            font-weight: 300;
        }
    }
}

.mdl-group-commit{
    padding: 8rem 0;
    font-weight: 300;
    font-size: 28px;
    line-height: 35px;
    text-align: left;
    color: $greydark;
    gap: 6rem;
    display: flex;
    flex-flow: column;

    .container{
        &__bx{
            gap: 8rem;
            flex-flow: row;

            @media(width <= $md){
                gap: 5rem;
                flex-flow: column;
                flex-wrap: nowrap;
            }
        }
    }

    &__it{
        &:nth-child(2n){
            .container{
                &__bx{
                    flex-flow: row-reverse;

                    @media(width <= $md){
                        flex-flow: column;
                    }
                }
            }
        }
    }

    &__cl{
        width: 50%;
        @media(width <= $md){
           width: 100%;
        }

        p{
            img{
                border-radius: 0; 
                width: auto!important;

            }
        }
    }

    h1,h2,h3,h4,h5,h6{
        font-weight: 700;
        @include title1;
        text-align: left;
        color: $greydark;
    }

    img{
        border-radius: 2.4rem;
        overflow: hidden;
    }
}

.mdl-group-actions{
    padding: 8rem 0;
    background-color: #E6E6E6;
    text-align: center;

    h2{
        font-weight: bold;
        @include title1;
        color: $greydark;
        margin-bottom: 6rem;
    }

    .container{
        &__bx{
            flex-wrap: nowrap;    
        }
    }

    &__bx{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 5rem;
        margin-bottom: 5rem;

        @media(width <= $md){
            grid-template-columns: repeat(1,1fr);
        }
    }

    &__it{
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 2rem;

        img{
            max-width: 27.5rem;
        }

        p{
            font-weight: 300;
            font-size: 35px;
            line-height: 45px;
            color: $greydark;
            margin: 0;

            span{
                font-weight: 900;
                font-size: 8rem;
                line-height: 8rem;
                color: $greydark;
            }
        }
    }

    &__desc{
        max-width: 40.4rem;
        width: 100%;
        font-weight: 300;
        font-size: 28px;
        line-height: 35px;
        color: $greydark;
        margin:  0 auto;
        display: none;

        &.js-show{
            display: block;
        }
    }

    &__car{
        position: relative;
        margin-top: 5rem;
    }

    &__car-img{
        position: relative;

        img{
            border-radius: 3.7rem;
        }

        h3{
            font-weight: 700;
            font-size: 4.5rem;
            line-height: 3.5rem;
            text-align: center;
            color: $white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-bottom: 3.5rem;
            @media(width <= $md){
                font-size: 2.9rem;
                line-height: 3.2rem;
                margin-bottom: 0;
            }
        }
    }

    &__car-it{
        max-width: 53.6rem;

        @media(width <= $xl){
            max-width: 40rem;
        }

        @media(width <= $md){
            max-width: 100%;
        }

    }

    &__car-txt{
        max-width: 485px;
        width: 100%;
        font-weight: 300;
        font-size: 28px;
        line-height: 35px;
        text-align: center;
        color: $greydark;
        margin: 0 auto;
        margin-top: 3.8rem;
    }

    .swiper-car2{
        .swiper-wrapper {
            // display: flex;
            // justify-content: flex-end;
        }
    }

    .swiper-car1,
    .swiper-car2 {
        width: calc(100% - 14rem);

        @media(width <= $md){
            width: calc(100% - 9rem);
        }
    }

    .swiper-button-next,
    .swiper-button-prev{
        width: 5rem;
        height: 5rem;
        background-image: url('../imgs/icons/arrow-left.png');
        background-repeat: no-repeat;
        background-size: cover;

        @media(width <= $md){
            width: 3rem;
            height: 3rem;
        }

        &::after{
            display: none;
        }
    }
    .swiper-button-next{
        right: 0;
        background-image: url('../imgs/icons/arrow-right.png');

    }

    .swiper-button-prev{
        left: 0;
    }
}


.mdl-group-install{
    padding: 8rem 0;
    background-color: white;
    font-weight: 300;
    font-size: 28px;
    line-height: 35px;
    color: $greydark;

    .container{
        &__bx{
            gap: 5rem;
            flex-flow: row;

            @media(width <= $md){
                flex-flow: column;
            }
        }
    }

    &__cl{
        width: 50%;

        @media(width <= $md){
            width: 100%;
        }

        &--rg{
            img{
                border-radius: 2rem;
                margin-bottom: 1.6rem;
            }
        }
    }



    h2,h3,h4,h5,h6{
        @include title1;
        text-align: left;
        color: $greydark;
    }

}

.mdl-group-banner{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 2.1rem 0 0;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    font-weight: 300;
    font-size: 28px;
    line-height: 35px;
    text-align: left;
    color: #000;

    &__bx{
        padding: 16rem 2rem 16rem 8rem;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(112, 112, 112, 0);
        width: 50%;

        @media(width <= $md){
            width: 100%;
            padding: 10rem 2rem;
        }
    }
}

.mdl-group-social{
    padding: 8rem 0;
    text-align: center;
    background-color: $white;

    h2{
        font-weight: bold;
        @include title1;
        color: $greydark;
        margin-bottom: 6rem;
    }

    .container{
        &__bx{
            flex-wrap: nowrap;
        }
    }

    &__bx{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 5rem;

        @media(width <= $md){
            grid-template-columns: repeat(1,1fr);
        }
    }

    &__it{
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 2rem;

        img{
            max-width: 27.5rem;
        }

        p{
            font-weight: 300;
            font-size: 35px;
            line-height: 45px;
            color: $greydark;
            margin: 0;

            span{
                font-weight: 900;
                font-size: 8rem;
                line-height: 8rem;
                color: $greydark;
            }
        }
    }
}

.mdl-group-solidarity{
    padding: 8rem 0;
    background-color: $white;
    text-align: center;

    .container{
        &__bx{
            flex-wrap: nowrap;
        }
    }

    h2,h3,h4,h5,h6{
        font-weight: 700;
        @include title1;
        color: $greydark;
        margin-bottom: 6rem;
    }
}

.mdl-group-clarity{
    padding: 8rem 0;
    background-color: #E6E6E6;
    font-weight: 300;
    font-size: 28px;
    line-height: 35px;
    text-align: center;
    color: $greydark;


    &__intro{
        text-align: center;

        h1,h2,h3,h4,h5,h6{
            font-weight: 700;
            @include title1;
            text-align: center;
            color: $greydark;
            margin-bottom: 4rem;
        }
    }

    &__txt{
        max-width: 108.8rem;
        margin: 0 auto;
    }

    &__bx{
        margin-top: 5rem;
        gap: 1.3rem 1.6rem;
        display: grid;
        grid-template-columns: repeat(2,1fr);

        @media(width <= $md){
            grid-template-columns: repeat(1,1fr);
        }
    }

    &__it{
        border-radius: 3.6rem;
        padding: 6rem;
        display: flex;
        gap: 2rem;
        text-align: left;
        font-size: 2.8rem;
        line-height: 3.5rem;
        text-align: left;
        color: $greydark;
        align-items: center;

        @media(width <= $md){
            padding: 3rem;
            flex-flow: column;
        }

        h1,h2,h3,h4,h5,h6{
            font-size: 2.8rem;
            line-height: 3.5rem;
            color: $greydark;
            margin: 0;
        }

        .btn{
            width: 20rem;
            font-size: 2.2rem;
        }

        .mdl-group-clarity{
            &__cl{
                @media(width <= $md){
                    width: 100%;
                    gap: 2rem;
                }
                &--rg{
                    background-image: url('../imgs/icons/icon-download.png');
                    background-size: 2.3rem 4.2rem;
                    padding-top: 6rem;
                    background-position: top center;
                    background-repeat: no-repeat;
                    align-items: center;
                    display: flex;
                    justify-content: center;
                }
            }
        }
    }
} */
/* .mdl-group {
    justify-items: center;
    padding-left: 44px;
    padding-right: 44px;
    .dist-tit {
        color: $pink;
        text-align: left;
        font-size: 26px;
    }
    &--intro {
        padding-bottom: 4rem;
        min-height: 600px;
        .container {
            &__bx {

                @media(width <= $lg){
                    width: 50%;
                    justify-self: center;
                }

                @media(width <= $md){
                    width: 60%;
                }

                @media(width <= $sm){
                    width: 80%;
                }

                @media(width <= $xs){
                    width: 100%;
                }

                @media(width <= $xl){
                    gap: 28px;
                }
                .group-txt {
                    max-width: 100rem;
                    margin: 0 auto;
                }
            }
        }
    }
    & .group-tit {
        color: $pink;
        text-align: left;
        font-size: 36px;
    }
    & .group-txt {
        font-size: 2.8rem;
        line-height: 3.5rem;
        font-weight: 300;
        color: $greydark;
    }
    .group-grd-cl {
        margin-bottom: 4rem;
        position: relative;
    }
    & .group-grd-it {
        height: 30rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    & .group-grd-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 290px;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        border-radius: 12px;
        z-index: 2;

        @media(width <= $xl){
            padding-right: 10rem;
            padding-left: 10rem;
        }

    }
    & .group-grd-tit {
        font-size: 26px;
        line-height: 120%;
        font-weight: 800;
        color: $pink;
        height: 90px;
        margin-bottom: 0;
        z-index: 3;
        text-align: left;
    }
    & .btn-info {
        position: absolute;
        left: 50%;
        margin-left: -2.7rem;
        bottom: -2.7rem;
        z-index: 4;
    }
    &__info {
        position: absolute;
        bottom: -80px;
        right: 0;
        width: 183px;
        height: 183px;
        background-color: $pink;
        color: white;
        border-radius: 24px;
        font-size: 20px;
        line-height: 140%;
        font-weight: 400;
        text-align: left;
        z-index: 2;
        display: flex;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2rem 1.2rem 1rem;
    }
    .container
    {
        &__bx{
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
        }
    }
    .group-cl {
        display: grid;
        padding-left: 1rem;
        padding-right: 1rem;

        &--50 {
            width: 50%;
            @media(width <= $md){
                width: 100%;
            }
        }
        &--65 {
            width: 65%;
            @media(width <= $md){
                width: 100%;
            }
        }
        &--35 {
            width: 35%;
            @media(width <= $md){
                width: 100%;
            }
        }
        &--100 {
            width: 100%;


            font-size: 36px;
        }
        &--pd {
            padding: 5rem 14rem;

            @media(width <= $xl){
                padding: 5rem 2rem;
                order: 1;
            }

            @media(width <= $md){
                padding: 5rem 0;
                order: 1;
            }
        }
        &--ct {
            justify-items: center;
            text-align: center;
            margin-bottom: 2rem;
        }
        &--int {
            padding: 15rem 6rem 15rem 0;
        }
        &--grd {
            max-width: 1440px;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 56px;
            margin-top: 7rem;
            margin-bottom: 5rem;

            @media(width <= $xl){
                gap: 28px;
            }

            @media(width <= $lg){
                gap: 3rem;
                grid-template-columns: repeat(1,1fr);
            }
        }
        &--valuesgrd {
            gap: 2rem 24px;
            display: flex;
            justify-content: center;
            flex-flow: row wrap;
        }
        &--lt {
            .group-imgbx {
                background-position: center right;
                border-radius: 0 3.7rem 3.7rem 0;
            }
        }
        &--rt {
            .group-imgbx {
                background-position: center left;
                border-radius: 3.7rem 0 0 3.7rem;
            }
        }
        &--py {
            padding-top: 10rem;
            padding-bottom: 9rem;
        }
    }
    &--cnt {
        background-color: $white;
        .group-cl--35 {
            & .group-tit {
                color: $pink;
                width: 100%;
                justify-self: center;
            }
            & .group-txt {
                width: 100%;
                max-width: 42rem;
                text-align: center;
            }
        }
        .group-cl--lt {
            & .group-tit {
                float: right;
            }
            & .group-txt {
                float: right;
            }
        }
        .group-cl--rt {
            & .group-tit {
                float: left;
            }
            & .group-txt {
                float: left;
            }
        }
    }
    &--np {
        .container{
            &__bx{
                padding: 0;
            }
        }
    }
    .group-logo {
        margin-top: 11rem;
        & img {
            max-width: 47.8rem;
            margin: 0 auto 8rem;
        }
    }
    .group-imgbx {
        height: 100%;
        min-height: 45.5rem;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    &--values {
        background-color: $white;
        padding: 8rem 0 3rem;
    }
    .group-valuesgrd-cl {
        width: 206px;
        height: 206px;
        background-color: #6D267C;
        border-radius: 25px;
        text-align: center;
        margin-bottom: 2rem;
        display: inline-block;


        @media (width <= $md) {
            width: 100%;
        }

        & img {
            max-height: 97px;
            width: auto;
            margin-top: 3.5rem;
            display: inline;
        }
    }

    .group-valuesgrd-img {
        text-align: center;
    }
    .group-valuesgrd-tit {
        border-radius: 25px;
        font-size: 20px;
        font-weight: 400;
        line-height: 4.5rem;
        color: $white;
        @media(width <= $md){
            font-size: 26px;
        }
    }
    .group-valuesgrd-txt {
        font-size: 2.8rem;
        line-height: 3.5rem;
        color: $greydark;
    }
}

.mdl-group-history{
    padding: 8rem 0;
    background-color: #F2F0F0;

    h2{
        font-weight: bold;
        @include title1;
        text-align: center;
        color: $greydark;
    }

    &__year{
        font-weight: bold;
        font-size: 4.5rem;
        line-height: 5rem;
        text-align: center;
        color: #b31983;
        margin: 1rem 0;
        padding-right: 1.5rem;
    }

    &__bt{
        margin: 1rem auto;
        padding-right: 1.5rem;

        img{
            max-width: 4rem;
        }
    }

    &__bx{
        height: 58rem;
        overflow-x: auto;
        max-width: 120rem;
        margin: 2rem auto;
        width: 100%;
        padding-bottom: 4rem;
        position: relative;
    }

    &__it{
        width: 100%;
        height: 28rem;
        position: relative;

        @media(width <= $xl){
            height: auto;
        }

        &:nth-child(1){
            padding-top: 3rem;

            &::after{
                content: '';
                width: 3rem;
                height: 3rem;
                background-color: $pink;
                display: block;
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);

                @media(width <= $xl){
                    left: 0;
                    transform: none;
                }
            }

            .mdl-group-history{
                &__cl{
                    padding-top: 13rem;

                    @media(width <= $xl){
                        padding-top: 8rem;
                    }
                }

                &__date{
                    @media(width <= $xl){
                        top: 0;
                    }

                }
            }
        }

        &:last-child{
            padding-bottom: 25rem;
            height: auto;

            @media(width <= $xl){
                padding-bottom: 10rem;
            }

            &::after{
                content: '';
                width: 3rem;
                height: 3rem;
                background-color: $pink;
                display: block;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);

                @media(width <= $xl){
                    left: 0;
                    transform: none;
                }
            }

            &::before{
                content: '';
                width: 1rem;
                height: 25rem;
                background-color: #B7B7B7;
                display: block;
                position: absolute;
                bottom: .1rem;
                left: 50%;
                transform: translateX(-50%);

                @media(width <= $xl){
                    left: 1rem;
                    transform: none;
                    height: 10rem;
                }
            }
        }

        &:nth-child(2n){
            .mdl-group-history{
                &__cl{
                    &::after{
                        background-color: $greydark;
                        right: auto;
                        left: -0.5rem;

                        @media(width <= $xl){
                            left: 1rem;
                        }

                    }
                }

                &__date{
                    left: 0;
                    right: auto;

                    @media(width <= $xl){
                        left: 1rem;
                        top: -2rem;
                        bottom: auto;
                    }

                    &::after,
                    &::before{
                        background-color: $greydark;
                    }

                    &::after{
                        left: auto;
                        right: -0.1rem;

                        @media(width <= $xl){
                            left: auto;
                        }
                    }

                    span{
                        &::after,
                        &::before{
                            background-color: $greydark;
                        }
                    }
                }
            }
        }


        &--r{
            display: flex;
            justify-content: flex-end;

            .mdl-group-history{
                &__cl{
                    padding-left: 20rem;
                    padding-right: 0;

                    @media(width <= $xl){
                        padding-left: 5rem;
                    }
                }
            }
        }

        img{
            max-width: 40rem;
            border: 0.1rem solid $pink;
            border-radius: 1.2rem;
            // height: 25.5rem;
            aspect-ratio: 1.75;
            object-fit: cover;
            margin-bottom: 2rem;
        }

        p{
            font-weight: 300;
            font-size: 2.2rem;
            line-height: 3.2rem;
            text-align: center;
            color: $greydark;
            max-width: 40rem;
            padding: 0 1.2rem;

            @media(width <= $md){
                font-size: 1.8rem;
                line-height: 2.2rem;
            }
        }
    }

    &__cn{
        // padding-top: 12rem;
        max-width: 40rem;
        position: relative;

        @media(width <= $xl){
            // padding: 8rem 0 4rem;
        }
    }

    &__cl{
        width: 50%;
        padding-right: 20rem;
        position: relative;
        height: 100%;
        padding-top: 16rem;

        @media(width <= $xl){
            width: 100%;
            padding-right: 0;
            padding-left: 5rem;
            padding-top: 8rem;
            padding-bottom: 4rem;
        }

        &::after{
            content: '';
            width: 1rem;
            height: 100%;
            display: block;
            position: absolute;
            background: $pink;
            top: -1px;
            right: -0.5rem;

            @media(width <= $xl){
                left: 1rem;
                right: auto;
            }
        }
    }

    &__date {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 4rem;
        font-weight: bold;
        font-size: 3rem;
        line-height: 3.2rem;
        text-align: center;
        color: $greydark;
        bottom: -2.2rem;

        @media(width <= $xl) {
            left: 1rem;
            right: auto;
            bottom: auto;
            top: 0;
        }

        &::after {
            content: '';
            width: 2.2rem;
            height: 2.2rem;
            background-color: $pink;
            display: block;
            position: absolute;
            left: 0;
            transform: translateY(-50%);
            border-radius: 50%;
            top: 50%;
            bottom: 50%;
            @media(width <= $xl) {
                left: auto;
                right: 0;
            }
        }

        &::before {
            content: '';
            height: 0.3rem;
            background-color: $pink;
            width: 100%;
            display: block;
            position: absolute;
            top: 50%;
            bottom: 50%;
            transform: translateY(-50%);
            right: 0;
        }

        span {
            position: relative;
            padding: 0.5rem 1rem;
            background-color: #f2f0f0;
            text-align: center;
            display: block;
            white-space: pre-line;
            min-width: 8rem;

            &::after,
            &::before {
                content: '';
                width: 0.1rem;
                height: 100%;
                background-color: $pink;
                display: block;
                position: absolute;
                top: 0;
            }

            &::after {
                left: 0;
            }

            &::before {
                right: 0;
            }
        }
    }


    .btn{
        border: 0.1rem solid $pink;
        background-color: transparent;
        align-self: flex-end;
        margin-top: -6rem;

        @media(width <= $lg){
           align-self: center;
           margin-top: 4rem;
        }
    }
}

.title {
    line-height: 120% !important;
    text-align: left !important;
    font-size: 80px !important;
}


.mdl-hero-sm {
    height: 434px;
}


.stats-section {


    overflow-x: hidden;
    background: #fff;
    text-align: center;
    min-height: 416px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    .container {
        display: grid;
    }
    .stats-title {
        justify-self: center;
        max-width: 874px;
        line-height: 130%;
        font-size: 25px;
        font-weight: 700;
        margin-top: 65px;
        margin-bottom: 65px;
        color: $greydark;
    }

    .stats-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4rem;

        @media(width <= $sm){
            gap: 2rem;
        }

        .stat-item {
            flex: 1 1 150px;
            max-width: 180px;

            .stat-count {
                font-size: 48px;
                font-weight: bold;
                color:$pink;
                text-align: center;
                justify-self: center;
                margin-bottom: 3rem;

                @media(width <= $md){
                    font-size: 40px;

                }

                @media(width <= $sm){
                    font-size: 40px;

                }
            }

            .stat-label {
                text-align: center;
                font-size: 19.5px;
                line-height: 140%;
                color:$pink;
            }
        }
    }
    .container {
        max-width: 1044px;
        padding-top: 41px;



        &__bx {
            text-align: center;
            letter-spacing: 0.8px;
            padding-left: 0;
            padding-right: 0;

            @media (max-width: 1200px) {
                padding-left: 5px;
                padding-right: 5px;
            }

            h2 {
                font-size: 36px;
                color: $greydark;
                margin-bottom: 24px;
            }

            p {
                font-size: 20px;
                line-height: 140%;
                color: $greydark;
            }

            .purple {
                font-weight: 700;
                color: $pink;
            }

            .logo-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 5rem;
                margin-top: 2rem;
                margin-bottom: 12rem;
                align-items: center;
                span {
                    width: 46px;
                    height: 46px;
                    background-image: url('/imgs/icons/plus-purple.png');
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: contain;

                    image-rendering: auto;
                }

                .logo {
                    width: 300px;
                    object-fit: contain;

                    @media (max-width: 768px) {
                        width: 200px;
                    }

                    @media (max-width: 480px) {
                        width: 100px;
                    }
                }
            }
        }
    }
}

.missions-grid {
    display: grid;
    background-color: $white;
    justify-items: center;
    padding-left: 30px;
    padding-right: 30px;
    &__container {
        max-width: 1440px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;

        @media (max-width: $lg) {
            grid-template-columns: 1fr;
        }
    }

    &__item {
        position: relative;
        height: 472px;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        padding: 2rem;
        border-radius: 43px;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
            z-index: 1;
        }
    }

    &__overlay {
        position: relative;
        z-index: 2;
        color: white;
        text-align: left;
    }

    &__title {
        line-height: 120%;
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 1rem;
        color: $white;
        max-width: 200px;
    }

    &__description {
        font-size: 1.8rem;
        line-height: 1.5;
        font-weight: 300;
        color: white;
    }
}

.decoration-background {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    background-color: #F7F7F1;
    z-index: 0;
    overflow: hidden;
    max-width: 100%;
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../imgs/home/decoration-transparent2.png');
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.5;
        z-index: -1;
    }
}

.decoration-background-alt {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    background-color: #F7F7F1;
    z-index: 0;
    overflow: hidden;
    max-width: 100%;
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../imgs/home/decoration-transparent3.png');
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.5;
        z-index: -1;
    }
}

.decoration {
    max-width: 36px;
    margin-top: 5rem;
    margin-bottom: 2rem;
}

#mission {
    .group-tit {
        text-align: center;
        font-size: 36px;
        color: $greydark
    }
}

#laboratories {
    padding-left: 0;
    padding-right: 0;
    padding-top: 40px;
    background-color: $white;
    .container {
        display: grid;

        &__bx {
            max-width: 702px;
            justify-self: center;
            margin-bottom: 80px;
            .group-tit {
                text-align: center;
                font-size: 36px;
                color: $greydark;
                &--pink {
                    margin-top: 104px;
                    color: $pink;
                    opacity: 0.7;
                }
            }
            .group-txt {
                max-width: 702px;
                font-size: 20px;
                line-height: 140%;
                font-weight: 400;
            }
        }
    }
}


.labs-grid {
    padding: 4rem 2rem;
    justify-items: center;
    &__container {
        justify-self: center;
        max-width: 1640px;
        display: grid;
        grid-template-columns: repeat(11, 1fr);
        gap: 1rem;
        padding-right: 3rem;
        padding-left: 3rem;
        @media(width <= $xxl){
            grid-template-columns: repeat(6, 1fr);
        }
        @media(width <= $md){
            grid-template-columns: repeat(3, 1fr);
        }
        @media(width <= $xs){
            grid-template-columns: repeat(2, 1fr);
        }
    }

    &__item {
        position: relative;
        height: 106px;
        width: 106px;

        background-size: cover;
        background-position: center;
        border-radius: 2rem;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        padding: 2rem;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
        }
    }

    &__overlay {
        position: relative;
        z-index: 2;
        color: white;
        text-align: left;
    }

    &__title {
        font-size: 2.4rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: $white;
    }

    &__description {
        font-size: 1.8rem;
        line-height: 1.5;
        font-weight: 300;
        color: white;
    }
}

.mdl-group-learning {
    max-width: 100%;
    &--intro {
        background-color: $grey;
        padding-top: 8rem;
        padding-bottom: 4rem;
        .dist-tit {
            color: $pink;
        }
        .group-txt {
            max-width: 100rem;
            margin: 0 auto;
        }
    }
    & .group-tit {
        color: $greydark;
    }
    & .group-txt {
        font-size: 2.8rem;
        line-height: 3.5rem;
        font-weight: 300;
        color: $greydark;
    }
    .group-grd-cl {
        margin-bottom: 4rem;
        position: relative;
    }
    & .group-grd-it {
        height: 48.9rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    & .group-grd-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 48.9rem;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        border-radius: 3.7rem;
        z-index: 2;
    }
    & .group-grd-tit {
        font-size: 4.7rem;
        line-height: 5.7rem;
        font-weight: 800;
        color: $white;
        margin-bottom: 2.7rem;
        z-index: 3;
        text-align: center;
        padding-right: 2rem;
        padding-left: 2rem;
    }
    & .btn-info {
        position: absolute;
        left: 50%;
        margin-left: -2.7rem;
        bottom: -2.7rem;
        z-index: 4;
    }
    &__dropdown {
        position: absolute;
        left: 0;
        top: 3.7rem;
        width: 100%;
        max-height: 45.2rem;
        background-color: $white;
        border-bottom-right-radius: 3.7rem;
        border-bottom-left-radius: 3.7rem;
        padding: 7rem 3em 4rem;
        z-index: 1;
        transition: top .3s ease-in-out;
        font-size: 2.8rem;
        line-height: 3.5rem;
        font-weight: 300;
        color: $greydark;
        text-align: center;
        overflow: hidden;
        @media(width <= $md){
            position: relative;
            left: 0;
            top: -3.7rem;
            display: none;
        }
        &.js-show{
            top: 46rem;
            max-height: inherit;
            @media(width <= $md){
                top: -3.7rem;
                display: block;
            }
        }
    }
    .container{
        &__bx{
            display: flex;
            flex-flow: row wrap;
        }
    }
    .group-cl {
        &--50 {
            width: 50%;
            @media(width <= $md){
                width: 100%;
            }
        }
        &--65 {
            width: 65%;
            @media(width <= $md){
                width: 100%;
            }
        }
        &--35 {
            width: 35%;
            @media(width <= $md){
                width: 100%;
            }
        }
        &--100 {
            width: 100%;
        }
        &--pd {
            padding: 5rem 14rem;

            @media(width <= $xl){
                padding: 5rem 2rem;
                order: 1;
            }

            @media(width <= $md){
                padding: 5rem 0;
                order: 1;
            }
        }
        &--ct {
            text-align: center;
        }
        &--int {
            padding: 15rem 6rem 15rem 0;
        }
        &--grd {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            column-gap: 1.6rem;
            row-gap: 1.6rem;
            margin-top: 7rem;
            margin-bottom: 5rem;

            @media(width <= $xxl){
                column-gap: 0.2rem;
                row-gap: 1.6rem;
            }

            @media(width <= $xl){
                grid-template-columns: repeat(2,1fr);
                column-gap: 1rem;
                row-gap: 20rem;
            }

            @media(width <= $md){
                column-gap: 1.6rem;
                row-gap: 1.6rem;
                grid-template-columns: repeat(1,1fr);
            }
        }
        &--valuesgrd {
            gap: 4rem 13rem;
            display: flex;
            justify-content: center;
            flex-flow: row wrap;
        }
        &--lt {
            .group-imgbx {
                background-position: center right;
                border-radius: 0 3.7rem 3.7rem 0;
            }
        }
        &--rt {
            .group-imgbx {
                background-position: center left;
                border-radius: 3.7rem 0 0 3.7rem;
            }
        }
        &--py {
            padding-top: 10rem;
            padding-bottom: 9rem;
        }
    }
    &--cnt {
        background-color: $grey;
        padding: 2rem 0;
        .group-cl--35 {
            & .group-tit {
                color: $pink;
                width: 100%;
                max-width: 42rem;
                text-align: center;
            }
            & .group-txt {
                width: 100%;
                max-width: 42rem;
                text-align: center;
            }
        }
        .group-cl--lt {
            & .group-tit {
                float: right;
            }
            & .group-txt {
                float: right;
            }
        }
        .group-cl--rt {
            & .group-tit {
                float: left;
            }
            & .group-txt {
                float: left;
            }
        }
    }
    &--np {
        .container{
            &__bx{
                padding: 0;
            }
        }
    }
    .group-logo {
        margin-top: 11rem;
        & img {
            max-width: 47.8rem;
            margin: 0 auto 8rem;
        }
    }
    .group-imgbx {
        height: 100%;
        min-height: 45.5rem;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    &--values {
        padding: 11rem 0 8rem;
        background-image: url('../imgs/demo/group/bg-values.png');
        background-size: 3rem 2rem;
    }
    .group-valuesgrd-cl {
        width: calc(33.333% - 13rem);
        text-align: center;
        margin-bottom: 2rem;
        @media(width <= $md){
            width: calc(100% - 13rem);
        }
        & img {
            max-width: 17.8rem;
            margin-bottom: 3.5rem;
            display: inline;
        }
    }
    .group-valuesgrd-img {
        text-align: center;
    }
    .group-valuesgrd-tit {
        font-size: 6.5rem;
        line-height: 4.5rem;
        font-weight: 700;
        color: $greydark;
        margin-bottom: 3.5rem;
        @media(width <= $md){
            font-size: 4.5rem;
        }
    }
    .group-valuesgrd-txt {
        font-size: 2.8rem;
        line-height: 3.5rem;
        color: $greydark;
    }
}

 */
/* .mdl-learning {
    .container{
        &--full {
            max-width: inherit;
        }
        &__bx{
            display: flex;
            flex-flow: row wrap;
        }
    }
    &--hero {
        .container{
            &__bx{
                padding: 0 0;
            }
        }
    }
    &--py{
        padding: 3.8rem 0;
    }
    & .learning-hero-bg {
        width: 100%;
        padding-top: 16rem;
        padding-bottom: 37rem;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        text-align: center;
        @media(width <= $md){
            padding-right: 3rem;
            padding-left: 3rem;
        }
    }
    .learning-hero-logo {
         max-width: 54.3rem;
         margin: 0 auto 4rem;
    }
    .learning-hero-txt {
        text-align: center;
        font-size: 4.5rem;
        line-height: 5rem;
        font-weight: 800;
        color: $fucsia;
        margin-bottom: 4rem;
    }

    .learning-cl {
        &--50 {
            width: 50%;
            @media(width <= $md){
                width: 100%;
            }
        }
        &--100 {
            width: 100%;
        }
        &--pd {
            padding: 5rem 14rem;
            @media(width <= $md){
                padding: 5rem 0;
                order: 1;
            }
        }
        &--ct {
            text-align: center;
        }
        &--int {
            padding: 15rem 6rem 15rem 0;
        }
        &--bt {
            padding-bottom: 9.2rem;
        }
        &--py {
            padding-top: 10rem;
            padding-bottom: 9rem;
        }
    }
    &--cnt {
        background-color: $grey;
        .swiper-slide {
            text-align: center;
            margin-top: 5rem;
            img {
                width: auto;
                max-width: 20rem;
                max-height: 10rem;
                display: inline;
            }
        }
    }
    &--intro {
        .container{
            &__bx{
                padding: 6.5rem 2rem 0;
            }
        }
    }
    .learning-tit {
        font-size: 4.5rem;
        line-height: 5rem;
        font-weight: 800;
        color: $fucsia;
        margin: 0 auto 3rem;
    }
    .learning-subtit {
        color: $greydark;
        max-width: 91rem;
        margin: 0 auto 3rem;
    }
    .learning-txt {
        font-size: 2.8rem;
        line-height: 3.5rem;
        font-weight: 300;
        color: $greydark;
        max-width: 91rem;
        margin: 0 auto 3rem;
    }
    & .learning-bt {
        display: inline-block;
        padding: 1.2rem 9rem;
        color: $white;
        width: fit-content;
        margin: 3rem auto;
        border-radius: 99rem;
        font-size: 2.5rem;
        line-height: 3.3srem;
        color: $white;
        background-color: $fucsia;
        margin: 5rem auto 3rem;
    }
    .btn-info {
        background-image: url(../imgs/icons/plus-pink.png);
        &.js-show {
            background-image: url(../imgs/icons/minus-pink.png);
        }
    }
    .group-imgbx {
        position: relative;
        border-radius: 3.7rem !important;
    }
    .learning-icon {
        position: absolute;
        top: -2rem;
        right: 2rem;
        width: 11.6rem;
        z-index: 2;
    }
    &__bx{
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        margin-top: 9rem;
    }
    &__it {
        text-align: center;
        border-right: .1rem solid $grey;
        padding: 0 3rem;
        &:nth-child(1) {
            width: 33%;
            @media(width <= $md){
                width: 100%;
                border-right: none;
                border-bottom: .1rem solid $grey;
            }
        }
        &:nth-child(2) {
            width: 32%;
            @media(width <= $md){
                width: 100%;
                border-right: none;
                border-bottom: .1rem solid $grey;
            }
        }
        &:nth-child(3) {
            width: 35%;
            border-right: none;
            @media(width <= $md){
                width: 100%;
            }
        }
        @media(width <= $md){
            padding: 3rem 0;
        }
        img{
            max-width: 27.5rem;
        }
        p{
            font-weight: 300;
            font-size: 35px;
            line-height: 45px;
            color: $greydark;
            margin: 0;

            span{
                font-weight: 900;
                font-size: 8rem;
                line-height: 8rem;
                color: $greydark;
            }
        }
    }
    &--banner{
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 0 2.1rem 0 0;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        font-weight: 300;
        font-size: 28px;
        line-height: 35px;
        text-align: left;
        color: #000;
        &__bx{
            padding: 7.6rem 2rem 7.6rem 8rem;
            width: 50%;
            color: $white;
            @media(width <= $md){
                padding: 7.6rem 2rem 7.6rem 3rem;
                width: 100%;
            }
        }
        &__txt {
            font-size: 4.5rem;
            line-height: 5rem;
            font-weight: 800;
            color: $white;
            margin-bottom: 4rem;
            position: relative;
            padding-top: 4rem;
            max-width: 49rem;
            &::after {
                position: absolute;
                content: "";
                width: 7.3rem;
                height: 1rem;
                background-color: #FFA400;
                top: 0;
                left: 0;
            }
        }
        & .learning-bt {
            margin: 2rem auto 1rem;
        }
    }
    .group-cl {
        & .learning-bt {
            padding: 1.2rem 3rem;
        }
    }
}
.learning-tit {
    color: $fucsia !important;
} */
/* .mdl-services-filters{
    background-color: $white;
    padding: 4rem 0 2rem 0;
    text-align: center;

    .container{
        display: grid;
        &__bx{
            max-width: 1308px;
            justify-self: center;
            h2 {
                margin-bottom: 4rem;
            }
        }
    }

    h2{
        font-size: 4.5rem;
        line-height: 5rem;
        text-align: center;
        color: $pink;
        margin-bottom: 6rem;
    }

    ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;

        li {
            list-style: none;
            display: flex;
            align-items: center;
            font-weight: 700;
            font-size: 20px;
            line-height: 3.2rem;
            color: $greydark;
            margin-bottom: 1rem;

            a {
                color: $greydark;
            }

            &:not(:last-child)::after {
                content: '';
                width: 2.5px;
                height: 1.6rem;
                background-color: $black;
                display: inline-block;
                margin-left: 25px;
                margin-right: 25px;
            }
        }
    }

}

.mdl-services-info{
    background-color: #F7F6F1;
    padding-top: 40px;

    &__it{
        overflow-x: hidden;
        padding: 4rem 0;

        .container{
            &__bx{
                flex-flow: row wrap;

            }
        }
    }

    &__cl{

        width: 40%;
        position: relative;

        @media(width <= $md){
            padding-left: 0;
            width: 100%;
            margin-bottom: 20px;
        }


        img {
            justify-self: right;
            max-height: 500px;
            max-width: 500px;
        }

        &--rg{
            margin-left: 0;
            padding: 0 0 4rem 6rem;
            width: 60%;

            @media(width <= $md){
                padding-left: 0;
                width: 100%;
            }
        }
    }

    img{
        border-radius: 2rem;
    }

    h3{
        @include title1;
        text-align: left;
        max-height: 100px;
        color: $greydark;
        margin-bottom: 40px;
    }

    p{
        font-weight: 300;
        font-size: 20px;
        line-height: 140%;
        color: $greydark;
        margin-bottom: 0;
    }
}
.subtitle {
    font-size: 20px;
    margin-bottom: 60px;
}

.btn--purple {
    position: absolute;
    background-color: $pink;
    font-size: 16px;
    max-width: 120px;
    color: white;
    border-radius: 12px;
    font-weight: 700;
    bottom: 30px;
    left: 60px;

    @media(width <= $xl){
        bottom: -40px;
        left: 0;
    }
}

.decoration-background {
    position: relative;
    z-index: 0;
    overflow: hidden;
    max-width: 100%;
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../imgs/home/decoration-transparent.png') !important;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.3;
        z-index: -1;
    }
}
 */
/* h2 {
    color: white;
    //font-size: 6.4rem;
}

.container__bx {
    @media (max-width: $md) {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.mdl-press {
    background-color: $white;

    &--intro {
        background-color: $white;
        padding-top: 8rem;
        padding-bottom: 1rem;

        .dist-tit {
            h1, h2, h3, h4, h5, h6 {
                color: $greydark;
                font-weight: 300;
            }

            h3 {
                margin-bottom: 0;
            }
        }
    }

    .container {
        &__bx {
            ::placeholder {
                color: white;
                font-family: DM Sans, sans-serif;
            }

            .contact {
                padding-top: 2rem;
                border-top: black .2rem solid;
                width: 50rem;
                h2 {
                    font-size: 2.4rem !important;
                    margin-bottom: 1rem;
                    color: $black;
                }
                div {
                    margin-bottom: 4rem;
                    p {
                        margin-bottom: 1rem;
                    }

                    .row {
                        display: flex;
                        flex-direction: row;
                        .icon-row {
                            display: flex;
                            flex-direction: row;
                            gap: 1rem;
                            margin-left: 2rem;

                            a {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 3.5rem;
                                height: 3.5rem;
                                border-radius: 50%;
                                background-color: $white;
                                border: 1px solid $black;

                                img {
                                    width: 2rem;
                                    height: 2rem;
                                }
                            }
                        }
                    }
                }
            }

            .custom-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 2.5rem 1.25rem; // 40px vertical, 20px horizontal
                margin-bottom: 5rem;

                @media (min-width: 1024px) {
                    grid-template-columns: repeat(3, 1fr);

                    .video-section {
                        grid-column: span 2;
                    }
                }
            }

            .video-section {
                .responsive-video {
                    position: relative;
                    width: 100%;
                    padding-top: 42.8571%; // 21:9 aspect ratio

                    iframe {
                        position: absolute;
                        top: 0; left: 0; right: 0; bottom: 0;
                        width: 100%;
                        height: 100%;
                        border: none;
                    }

                    margin-bottom: 2.6rem;
                }
            }

            .media-item {
                .media-img {
                    height: 90%;
                    margin-bottom: 2.6rem;

                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                        display: block;
                    }
                }
            }

            .section-label {
                position: relative;
                display: inline-block;

                p {
                    background: white;
                    padding-right: 1.25rem;
                    position: relative;
                    z-index: 1;
                    margin: 0;
                    white-space: nowrap;
                }

                .line {
                    height: 2px;
                    background: black;
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 0;
                }
            }

            .info-section {
                margin-bottom: 3rem;
            }

            .info-header {
                display: flex;
                justify-content: flex-end;
                width: 100%;

                .title-block {
                    width: 100%;
                    border-top: 2px solid black;
                    margin: 0 auto 5rem auto;

                    @media (min-width: 1024px) {
                        width: 40%;
                        margin-left: auto;
                        margin-right: 0;
                    }

                    h2 {
                        margin-bottom: 0;
                        font-size: 2.4rem;
                        color: black;
                        font-weight: bold;
                        padding-top: 1rem;
                    }

                    .description {
                        p {
                            margin: 0;
                        }
                    }
                }
            }

            .info-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 2.5rem 3rem; // gap-y 40px, gap-x 48px

                @media (min-width: 768px) {
                    grid-template-columns: repeat(2, 1fr);
                }

                @media (min-width: 1024px) {
                    grid-template-columns: repeat(3, 1fr);
                }

                .info-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    max-width: 300px;
                    margin-left: auto;
                    margin-right: auto;

                    @media (min-width: 768px) {
                        &:nth-child(1) {
                            margin-right: auto;
                        }

                        &:nth-child(2) {
                            margin-left: auto;
                        }
                    }

                    @media (min-width: 1024px) {
                        &:nth-child(3) {
                            grid-column: span 1;
                            margin-left: auto;
                        }
                    }

                    img {
                        width: 100%;
                        height: auto;
                        display: block;
                    }

                    .info-text {
                        text-align: center;
                        padding-top: 2rem;

                        h3 {
                            font-size: 1.8rem !important;
                            font-weight: 400;
                        }
                    }
                }

                .wide {
                    @media (min-width: 768px) and (max-width: 1023px) {
                        grid-column: span 2;
                    }
                }
            }

            .filters {
                display: flex;
                flex-direction: row-reverse;

                @media (max-width: $md) {
                    flex-direction: column !important;
                }

                .category-filter {
                    margin-top: 10rem;
                    @media (max-width: $md) {
                        margin-top: 1rem;
                    }
                    padding-left: 1rem;
                    padding-right: 1rem;

                    .custom-select {
                        position: relative;
                        width: 100%;
                        min-width: 24rem;
                        background-color: #7d2082;
                        color: $white;
                        font-size: 1.6rem;
                        font-weight: 500;
                        border: none;
                        cursor: pointer;
                        user-select: none;
                        padding: 1.8rem 1.5rem;
                        border-radius: 0;
                        transition: background-color 0.2s;
                        display: flex;
                        flex-direction: row;

                        .arrow {
                            position: absolute;
                            right: 1.5rem;
                            top: 50%;
                            transform: translateY(-50%);
                            pointer-events: none;
                            font-size: 1.6rem;
                            color: $white;
                            transition: transform 0.2s ease;
                        }

                        &.open .arrow {
                            transform: translateY(-50%) rotate(180deg);
                        }

                        .selected {
                            pointer-events: none;
                        }

                        &:hover {
                            background-color: #681e6c;
                        }

                        .select-options {
                            display: none;
                            position: absolute;
                            top: 100%;
                            left: 0;
                            right: 0;
                            border: none;
                            z-index: 10;
                            padding-left: 0;
                            background-color: $white;

                            ol, ul {
                                padding-left: 0;
                            }

                            li {
                                list-style: none;
                                padding: 1.5rem 1rem 1.5rem 1rem;
                                cursor: pointer;
                                color: $black;
                                &:hover {
                                    color: $white;
                                    background-color: #7d2082;
                                }
                            }
                        }

                        &.open .select-options {
                            display: block;
                        }
                    }
                }
            }

            .grid {
                margin-top: 2rem;
                margin-bottom: 4rem;
                display: block;
            }

            .no-results {
                min-height: 400px;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                font-size: 3.6rem;
                font-weight: 500;
                line-height: 140%;
                color: #444;
            }

            .grid-sizer,
            .grid-item {
                width: 33.333%;

                @media (max-width: $xl) {
                    width: 50%;
                }
            }

            .grid-item {
                min-height: 19rem !important;
                padding: 1rem;
                box-sizing: border-box;
            }

            .card__content {
                border: $black 2px solid;
                background: $white;
                padding: 1.5rem;
                display: flex;
                flex-direction: column;
                position: relative;

                &.has-image {
                    .card__image {
                        img {
                            min-height: 30rem;
                            width: 100%;
                            display: block;
                            object-fit: cover;
                        }
                        padding-bottom: 2rem;
                    }
                }

                h3 {
                    font-size: 2.4rem;
                    font-weight: bold;
                    margin-bottom: 0.5rem;
                    line-height: 1.4;
                }

                .card__text {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    div {
                        p {
                            a {
                                text-decoration: underline;
                            }
                        }
                    }
                }

                .date {
                    background-color: $black !important;
                    color: $white;
                    font-size: 1.6rem;
                    padding: 0.25rem 0.75rem;
                    width: 11rem !important;
                    margin-bottom: 1rem;
                    font-weight: 700;
                    text-wrap: nowrap;
                }

                p {
                    font-size: 1.6rem;
                    margin-bottom: 1rem;
                    line-height: 140%;
                }

                .downloads {
                    font-weight: 600;

                    a {
                        text-decoration: none;
                        margin-right: 1rem;
                        color: inherit;
                        font-size: 1.6rem;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }

            .grid-item--full {
                width: 100%;

                .card__content.is-first {
                    justify-content: left;
                    display: flex;

                    @media (min-width: $md) {
                        flex-direction: row-reverse;
                    }
                }

                .card__content.has-image {
                    display: flex;
                    flex-direction: row-reverse;

                    @media (max-width: $md) {
                        flex-direction: column;
                    }

                    .card__text {
                        padding-top: 6rem;

                        p {
                            max-width: 75rem;
                        }
                        div {
                            p {
                                a {
                                    text-decoration: underline;
                                }
                            }
                        }
                    }

                    .card__image {
                        padding-bottom: 0 !important;
                        margin-bottom: 0 !important;

                        @media (min-width: $md) {
                            margin-left: auto;
                            padding-right: .4rem;
                        }

                    }

                    h3 {
                        font-size: 3.6rem;
                        font-weight: bold;
                        margin-bottom: 0.5rem;
                        line-height: 140%;
                    }
                }

                &.has-image {
                    min-height: 43rem !important;
                }
            }
        }
    }
}

@media (max-width: $md) {
    .mdl-press {
        .container {
            &__bx {
                .grid-sizer,
                .grid-item {
                    width: 100% !important;
                }

                .grid-item--full {
                    .card__content.has-image {
                        .card__text {
                            padding-top: 2rem !important;
                            div {
                                p {
                                    a {
                                        text-decoration: underline;
                                    }
                                }
                            }
                        }

                        .card__image {
                            padding-bottom: 2rem !important;
                            @media (max-width: $md) {
                                padding-bottom: 0 !important;
                            }
                        }
                    }
                }
            }
        }
    }
}
 */
/* h2 {
    color: white;
   // font-size: 6.4rem;
    line-height: 100%;
    margin-bottom: 2rem;
}

.inverse {

}


.description {
    p {
        line-height: 100%;

        a {
            color: white !important;
            text-decoration: underline;
        }
    }
}

.mdl-alerts {
    background-color: $white;

    &--intro {
        background-color: $white;
        padding-top: 8rem;
        padding-bottom: 1rem;

        .dist-tit {
            h1, h2, h3, h4, h5, h6 {
                color: $greydark;
                font-weight: 300;
            }

            h3 {
                margin-bottom: 0;
            }
        }
    }

    .container {
        &__bx {
            ::placeholder {
                color: white;
                font-family: DM Sans, sans-serif;
            }

            #alertsFilterForm {
                padding-top: 10rem;
                .row {
                    display: flex;
                    flex-direction: row;

                    @media (max-width: $xl) {
                        gap: .5rem;
                        flex-direction: column;
                    }

                    margin-bottom: 5rem;

                    .reverse {
                        margin-left: auto;
                        flex-direction: row-reverse !important;
                        @media (max-width: $md) {
                            flex-direction: column;
                            margin-left: 0;
                        }
                    }

                    .filters {
                        display: flex;
                        flex-direction: row;
                        gap: .5rem;

                        @media (max-width: $md) {
                            flex-direction: column;
                        }
                        .switch {
                            width: 11rem;
                            @media (max-width: $md) {
                                display: none;
                            }

                            display: flex;
                            padding: .5rem;
                            background-color: $pink;
                            height: 6rem;

                            .toggle-btn {
                                flex: 1;
                                background-color: $pink;
                                color: $white;
                                border: none;
                                font-size: 1.6rem;
                                font-weight: 500;
                                font-family: "DM Sans", sans-serif;
                                cursor: pointer;
                                transition: background-color 0.3s ease;
                                padding-top: .5rem;
                                padding-bottom: .5rem;
                                border-radius: .5rem;

                                img {
                                    filter: invert(1);
                                    max-width: 3rem;
                                    max-height: 3rem;
                                    margin: .5rem auto auto;
                                }

                                &.active {
                                    img {
                                        filter: invert(0);
                                    }
                                    background-color: $white;
                                    color: $black;
                                }

                                &:hover {
                                    img {
                                        filter: invert(0);
                                    }
                                    background-color: $white;
                                    color: $black;
                                }


                            }
                        }

                        .btn {
                            max-width: 10rem;
                            width: auto;
                            div {
                                height: 6rem;
                                background-color: #7d2082;
                                color: $white;
                                border: none;
                                font-size: 1.6rem;
                                font-weight: 500;
                                padding: 1.8rem 1.5rem;
                                text-align: left;
                                font-family: DM Sans, sans-serif;
                            }
                        }

                        .search {
                            width: 100%;

                            @media (min-width: $lg) {
                                width: 40rem;
                            }

                            input {
                                height: 6rem;
                                width: 100%;
                                background-color: #ae91b1;
                                color: $white;
                                border: none;
                                font-size: 1.6rem;
                                font-weight: 500;
                                padding: 1.8rem 1.5rem;
                            }
                            :focus {
                                border: none;
                            }
                            :active {
                                border: none;
                            }
                        }

                        .filter {
                            @media (max-width: $md) {
                                width: 100%;
                            }
                            .custom-select {
                                width: 14rem;
                                @media (max-width: $md) {
                                    width: 100%;
                                }
                                position: relative;
                                background-color: $pink;
                                color: $white;
                                font-size: 1.6rem;
                                font-weight: 500;
                                border: none;
                                cursor: pointer;
                                user-select: none;
                                padding: 1.8rem 1.5rem;
                                border-radius: 0;
                                transition: background-color 0.2s;
                                display: flex;
                                flex-direction: row;

                                .arrow {
                                    position: absolute;
                                    right: 1.5rem;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    pointer-events: none;
                                    font-size: 1.6rem;
                                    color: $white;
                                    transition: transform 0.2s ease;
                                }

                                &.open .arrow {
                                    transform: translateY(-50%) rotate(180deg);
                                }

                                .selected {
                                    pointer-events: none;
                                }

                                &:hover {
                                    background-color: #681e6c;
                                }

                                .select-options {
                                    display: none;
                                    position: absolute;
                                    top: 100%;
                                    left: 0;
                                    right: 0;
                                    border: none;
                                    z-index: 10;
                                    padding-left: 0;
                                    background-color: $white;

                                    ol, ul {
                                        padding-left: 0;
                                    }

                                    li {
                                        list-style: none;
                                        padding: 1.5rem 1rem 1.5rem 1rem;
                                        cursor: pointer;
                                        color: $black;
                                        &:hover {
                                            color: $white;
                                            background-color: #7d2082;
                                        }
                                    }
                                }

                                &.open .select-options {
                                    display: block;
                                }
                            }
                        }
                    }
                }
            }

            .grid {
                &.grid-view {
                    .grid-item {
                        width: 33.333%;

                        @media (max-width: $xl) {
                            width: 50%;
                        }

                        @media (max-width: $md) {
                            width: 100% !important;
                        }
                    }
                }

                &.list-view {
                    .grid-item {
                        width: 100%;
                        .card__content {
                            flex-direction: row;
                            gap: 2rem;

                            .card__text {
                                flex: 1;
                                display: flex;
                                flex-direction: row;
                                @media (max-width: $lg) {
                                    flex-direction: column;
                                    height: auto;
                                }

                                .date {
                                    width: 20%;
                                }

                                h3 {
                                    width: 20%;
                                }

                                .content {
                                    width: 50%;
                                }

                                .downloads {
                                    margin-left: auto !important;
                                }
                                div {
                                    p {
                                        a {
                                            text-decoration: underline;
                                        }
                                    }
                                }
                            }
                            h3 {
                                min-width: 30%;
                            }
                            .date {
                                min-width: 20%;
                                flex-shrink: 0;
                            }
                        }
                    }
                }
            }

            .grid-item--full {
                .card__content.is-first {
                    @media (min-width: $md) {
                        flex-direction: row !important;
                    }
                }

                .card__content.has-image {
                    @media (min-width: $md) {
                        flex-direction: row !important;
                    }
                }
            }

            .no-results {
                min-height: 400px;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                font-size: 3.6rem;
                font-weight: 500;
                line-height: 140%;
                color: #444;
            }

            .grid-sizer,
            .grid-item {
                width: 33.333%;
                @media (max-width: $xl) {
                    width: 50%;
                }
            }

            .grid-item {
                min-height: 19rem !important;
                padding: 1rem;
                box-sizing: border-box;
            }

            .card__content {
                border-bottom: $black 2px solid !important;
                background: $white;
                display: flex;
                flex-direction: column;
                position: relative;

                &.has-image {
                    .card__image {
                        img {
                            width: 100%;
                            height: auto;
                            display: block;
                            object-fit: cover;
                        }
                        padding-bottom: 2rem;
                    }
                }

                h3 {
                    font-size: 2.4rem;
                    font-weight: bold;
                    margin-bottom: 0.5rem;
                    line-height: 1.4;
                }

                .card__text {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    div {
                        p {
                            a {
                                text-decoration: underline;
                            }
                        }
                    }
                }

                .date {
                    color: $black;
                    font-size: 1.6rem;
                    width: 11rem !important;
                    margin-bottom: 1rem;
                    font-weight: 700;
                    text-wrap: nowrap;

                    .cn_code {
                        margin-left: 2rem;
                        color: $pink;
                    }
                }

                p {
                    font-size: 1.6rem;
                    margin-bottom: 1rem;
                    line-height: 140%;
                }

                .downloads {
                    font-weight: 600;
                    margin-bottom: 1rem;

                    a {
                        text-decoration: none;
                        margin-right: 1rem;
                        color: inherit;
                        font-size: 1.6rem;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }

            .grid-item--full {
                width: 100%;



                .card__content.is-first {
                    display: flex;

                    @media (min-width: $md) {
                        flex-direction: row-reverse;
                    }
                }

                .card__content.has-image {
                    display: flex;
                    flex-direction: row-reverse;

                    @media (max-width: $md) {
                        flex-direction: column;
                    }

                    .card__text {
                        padding-top: 6rem;



                        p {
                            max-width: 75rem;
                        }
                        div {
                            p {
                                a {
                                    text-decoration: underline;
                                }
                            }
                        }
                    }

                    .card__image {
                        padding-bottom: 0 !important;
                        margin-bottom: 0 !important;
                    }

                    h3 {
                        font-size: 3.6rem;
                        font-weight: bold;
                        margin-bottom: 0.5rem;
                        line-height: 140%;
                    }
                }

                &.has-image {
                    min-height: 43rem !important;
                }
            }
        }
    }
    .pagination-container {
        width: 100%;
        margin: 30px 0;
        display: flex;
        justify-content: center;
    }
    .pagination {
        display: flex;
        gap: 5px;
    }
    .pagination-btn {
        padding: 8px 12px;
        background: white;
        cursor: pointer;
        font-family: DM Sans, sans-serif;
        font-size: 2.4rem;
    }
    .pagination-btn:hover:not(.disabled) {
        background: #f0f0f0;
    }
    .pagination-btn.active {
        font-weight: 700;
        text-decoration: underline;
    }
    .pagination-btn.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

@media (max-width: $md) {
    .mdl-alerts {
        .container {
            &__bx {
                .grid-sizer,
                .grid-item {
                    width: 100% !important;
                }

                .grid-item--full {
                    .card__content.has-image {
                        .card__text {
                            padding-top: 2rem !important;
                            div {
                                p {
                                    a {
                                        text-decoration: underline;
                                    }
                                }
                            }
                        }

                        .card__image {
                            padding-bottom: 2rem !important;
                            @media (max-width: $md) {
                                padding-bottom: 0 !important;
                            }
                        }
                    }
                }
            }
        }
    }
}


 */
/* Ambas imágenes */
.decoration-section {
  background-image: url("/imgs/decoration-right.png"), url("/imgs/decoration-left.png");
  background-repeat: no-repeat, no-repeat;
  background-position: right bottom, left top;
}

/* Solo imagen derecha */
.decoration-section-right {
  background-image: url("/imgs/decoration-right.png");
  background-repeat: no-repeat;
  background-position: right bottom;
}

/* Solo imagen izquierda */
.decoration-section-left {
  background-image: url("/imgs/decoration-left.png");
  background-repeat: no-repeat;
  background-position: left top;
}

.decoration-section-right-top {
  background-image: url("/imgs/decoration-left-flipped.png");
  background-repeat: no-repeat;
  background-position: right top;
}

.decoration-section-left-bottom {
  background-image: url("/imgs/decoration-right-flipped.png");
  background-repeat: no-repeat;
  background-position: left bottom;
}

/*# sourceMappingURL=app.css.map*/