/* CONTENT STARTS */

.content {
  display: flex;
  flex-direction: column;
}

.banner-adquirir-seguro{
    display: block;
}
/* BANNER STARTS */
.banner {
    height: 500px;
    background-color: #e7e9f4;
    width: 100%;
    padding: var(--padding-banner);
    position: relative;
}

.banner__wrapper {
  display: flex;
  justify-content: space-evenly;
  width: auto;
  max-width: 1500px;
  margin: auto;
  height: 100%;
}

.banner__group-down {
    display: block;
    position: absolute;
    left: var(--padding-banner);
    bottom: var(--padding-banner);
}

.banner__group-up {
    display: block;
    position: absolute;
    right: var(--padding-banner);
    top: var(--padding-banner);
}

.banner__group-down-r {
    display:none;
}

.banner__group-up-r {
    display: none;
}



.banner__info {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 32px;
  width: fit-content;
  text-wrap: balance;
}

.banner__info__content {
  font-size: 32px;
  line-height: 42px;
  color: var(--Grey-grey-900);
}

.vive_momentos {
  color: var(--Grey-grey-900);
  font-feature-settings: "liga" off, "clig" off;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 42px; /* 131.25% */
}

.seguro-mascotas {
  color: var(--Purple-purple-500);
  font-feature-settings: "liga" off, "clig" off;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 42px; /* 87.5% */
}

.mientras_proteges {
  display:contents;
  color: var(--Grey-grey-900);
  font-feature-settings: "liga" off, "clig" off;
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: 42px;
}
.mientras_proteges-r {
    display: none;
}
.banner__imagen {
  transform: translateY(var(--padding-banner));
}

.banner__imagen__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BANNER ENDS */

/* COBERTURAS BASICAS */

.coberturas-basicas {
  padding: 40px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.coberturas-basicas__wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(470px, 1fr));
  gap: 24px;
  align-items: center;
  align-content: center;
  justify-content: space-evenly;
}

.coberturas-basicas__title {
  color: var(--Purple-purple-500);
  font-size: 24px;
  font-weight: 700;
}

.coberturas-basicas__cobertura {
  overflow: auto;
  padding: 24px;
  background-color: #fff;
  display: flex;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 24px;
  max-height: 200px;
  height: 100%;
  width: 100%;
}

.coberturas-basicas__cobertura img {
  flex-grow: 0;
  flex-basis: 0;
  max-height: 64px;
}

.coberturas-basicas___cobertura__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 24px;
  text-align: justify;
}

.coberturas-basicas___cobertura__info h6 {
  color: var(--Gris-grey-800);
  font-feature-settings: "liga" off, "clig" off;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 155.556% */
}

.coberturas-basicas___cobertura__info p:nth-child(1) {
  color: var(--Gris-grey-800, #33383e);
  font-feature-settings: "liga" off, "clig" off;

  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.coberturas-basicas___cobertura__info__valorasegurado {
  color: var(--Blue-blue-500);

  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.coberturas-basicas___cobertura__info__valorasegurado span {
  font-weight: 700;
}

/* COBERTURAS END */

/* BENEFICIARIOS STARTS */

.beneficios {
  padding: 40px 100px;
  background-color: #fff;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}

.beneficios__title h2 {
  color: var(--Purple-purple-500);

  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  margin-bottom: 5px;
}

.beneficios__title p {
  color: var(--Grey-grey-800);

  font-size: 20px;

  font-weight: 400;
  line-height: 34px;
}

.beneficios-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 24px;
  align-items: center;
  align-content: center;
  justify-content: space-evenly;
}
    
    .beneficios-wrapper__item {
        padding: 16px;
        border-radius: 8px;
        border: 1px solid #d9d9d9;
        display: flex;
        align-items: center;
        gap: 32px;
    }

.beneficios-wrapper__item img {
  max-height: 128px;
  border-radius: 4px;
}

.beneficios-wrapper__item__info h6 {
  color: var(--Gris-grey-800, #33383e);
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 8px;
}

.beneficios-wrapper__item__info p {
  color: var(--Gris-grey-800, #33383e);

  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

/* BENEFICIARIOS ENDS */

/* FAQ STARTS */

.faq {
  background-color: var(--Blue-blue-50);
  padding: 64px 40px;
}

.faq h2 {
  color: var(--Blue-blue-500);
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 24px;
}

.faq__wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 16px;
  margin: auto;
  max-width: clamp(200px, 100%, 833px);
}

.faq__pregunta {
  color: var(--Grey-grey-500);
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  text-align: justify;
  width: 100%;
  line-height: 24px;
  font-size: 16px;
  margin: 7px;
  max-height: 64px;
  transition: max-height 1.4s;
  overflow: auto;
}

.faq__pregunta[open] {
  max-height: 1100px;
}

.faq__pregunta summary {
  font-size: 18px;
  font-weight: 700;
  position: relative;
  user-select: none;
  cursor: pointer;
  text-align: start;
}

.faq__pregunta summary::marker {
  content: "";
}

.faq__pregunta summary::before {
  content: url(../img/plus.png);
  position: absolute;
  right: 0;
  cursor: pointer;
}

.faq__pregunta[open] summary::before {
  content: url(../img/minus.png);
}

.faq__pregunta strong {
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
}

.faq__pregunta__content {
    margin-top: 10px;
    padding: 1rem;
    animation: aparecer 1s 0.3s both;
    text-align: justify;
    text-wrap: pretty;
}

@keyframes aparecer {
  from {
    translatey: 0 -20px;
    opacity: 0;
  }
  to {
    translate: 0 0;
    opacity: 1;
  }
}

/* FAQ ENDS */

/* BANNER ADQUIRIR SEGURO STARTS */

.banner-adquirir-seguro {
  position: sticky;
  height: 100px;
  bottom: 0;
  background-color: var(--Blue-blue-200);
  width: 100%;
  padding: 32px 100px 20px 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.banner-adquirir-seguro h2 {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}

.banner-adquirir-seguro div {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: center;
}
.banner-adquirir-seguro div p {
  color: #fff;
  font-weight: 400;
  font-size: 24px;
}

.banner-adquirir-seguro button {
  width: 286px;
}

.banner-adquirir-seguro div p span {
  font-weight: 800;
  font-size: 32px;
}
.footer-r{
    display:none;
}

.coberturas-basicas {
    background-color: var(--body-bg);
}

.condiciones-seguro_imagen-r {
    display: none;
}
.condiciones-seguro__details_h2-r {
    display: none;
}
.condiciones-seguro__details_button-r {
    display: none;
}
#gradient {
    display:none;
}
.banner__SegurosMascotas {
    display: none;
}
/* BANNER ADQUIRIR SEGURO ENDS */
/* CONTENT ENDS */
/* MEDIA QUERIES */
@media (width < 1300px) {
    .beneficios-wrapper {
    grid-template-columns: repeat(1, minmax(200px, 1fr));
  }

  .coberturas-basicas__wrapper {
    grid-template-columns: repeat(1, minmax(470px, 1fr));
  }
}
/* Solo para el responsive */
@media (max-width: 1025px) {
    .banner-adquirir-seguro {
        padding: 12px 20px;
        flex-direction: column;
        align-items: flex-start;
        min-height: max-content;
    }

        .banner-adquirir-seguro div {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            gap: 15px;
        }

        .banner-adquirir-seguro h2 {
            font-size: 20px;
            margin-bottom: 0;
        }

        .banner-adquirir-seguro div p {
            font-size: 16px;
            margin-bottom: 0;
        }

            .banner-adquirir-seguro div p span {
                font-size: 20px;
            }

        .banner-adquirir-seguro button {
            width: auto;
            padding: 8px 16px;
        }
    .banner {
        height: auto;
    }
    .header {
        display: none;
    }
    .container {
        display:flex;
        flex-direction:column;
    }
    .banner__wrapper {
        flex-direction: column-reverse;
    }

    .banner__group-down-r {
        display:block;
        position: absolute;
        left: var(--padding-banner);
        top: var(--padding-banner);
    }

    .banner__group-up-r {
        display: block;
        position: absolute;
        right: var(--padding-banner);
        top: var(--padding-banner);
    }

    .banner__group-down {
        display:none;
    }

    .banner__group-up {
        display: none;
    }

    .banner__info {
        gap: 0px;
        width: auto;
        text-align:center;
        align-items:center;
    }

    .banner__info__content {
        font-size: 32px;
        line-height: 10px;
        color: var(--Grey-grey-900);
        padding-bottom:20px
    }
    .banner__imagen {
        transform: none;
        padding-top: 60px;
        display: flex;
        align-items: flex-end;
        padding-bottom:30px
    }
    #gradient {
        display:flex;
        align-items: flex-end;
        justify-content:center;
        position: absolute;
        z-index: 2;
        right: 0;
        left: 0;
        height: 200px;
        background: linear-gradient(to bottom, rgba(231, 233, 244, 0) 0%, rgba(231, 233, 244, 1) 80%);
    }
    #gradient img {
        width:140px;
    }
    .vive_momentos {
        font-size: 20px;
        line-height:10px;
    }
    .seguro-mascotas {
        display:none;
    }
    .mientras_proteges {
        display:none;
    }
    .mientras_proteges-r {
        display:contents;
        color: var(--Grey-grey-900);
        font-feature-settings: "liga" off, "clig" off;
        font-size: 20px;
        font-style: normal;
        font-weight: 300;
        line-height: 42px;
    }
    .banner__info button{
        width:100%;
        max-width:none;
    }
    .coberturas-basicas {
        padding: 40px 20px;
    }
    .coberturas-basicas__wrapper {
        display: flex;
        flex-direction:column;
    }
    .coberturas-basicas__cobertura {
        align-items: flex-start;
        max-height: fit-content;
        flex-direction:column;
        gap:10px;
    }
        .coberturas-basicas__cobertura img
        {
            max-height:44px;
        }
    .coberturas-basicas___cobertura__info {
        gap: 8px;
        text-align: left;
    }
        .coberturas-basicas___cobertura__info h6 {
            font-size: 16px;
            line-height: 24px;
        }
    .coberturas-basicas___cobertura__texto {
        text-align: left !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px
    }
    .coberturas-basicas__title {
        font-size: 20px;
        font-weight: 600;
    }
    .coberturas-basicas___cobertura__info__valorasegurado {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
    }
    .beneficios {
        padding: 40px 20px;
    }
    .beneficios-wrapper {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
    }
        .beneficios-wrapper::-webkit-scrollbar {
            display: none;
        }
    .beneficios-wrapper__item {
        max-height: fit-content;
        flex-direction: column;
        max-width:260px;
        min-height:340px;
    }
    .condiciones-seguro {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap:10px;
    }
    .condiciones-seguro_imagen {
        display: none;
    }
    .condiciones-seguro_imagen {
        display: none;
    }
    .condiciones-seguro_imagen-r {
        display: flex;
        height: 74px;
    }
    .condiciones-seguro__details_h2
    {
        display: none;
    }
    .condiciones-seguro__details_h2-r {
        display: flex;
    }
    .condiciones-seguro__details h2 {
        color: var(--Blue-blue-400);
        font-weight:700;
        font-size: 20px;
    }
    .condiciones-seguro__details__descarga {
        display: none;
    }
    .condiciones-seguro__details p
    {
        padding-top: 14px;
    }
    .condiciones-seguro__details_button-r{
        display: flex;
    }
    .condiciones-seguro__details_button-r button {
        width: 100%;
        max-width: none;
    }
    .footer-r {
        display: flex;
        grid-area: footer;
        max-width: 100dvw;
    }

    .footer__image-r {
        width: 100%;
        object-fit: cover;
    }
    .faq {
        padding: 20px !important;
    }
    .faq__wrapper {
        flex-direction: unset;
    }
    .faq__pregunta {
        max-height: 90px;
    }
        .faq__pregunta summary {
            padding-right: 40px;
        }
    .banner__SegurosMascotas {
        display: flex;
        padding-bottom: 20px;
        justify-content: center;

    }
        .banner__SegurosMascotas h2 {
            background-color: var(--Blue-blue-300);
            color: white;
            font-size: 24px;
            font-weight: 700;
            line-height: 34px;
            padding-left: 20px;
            padding-right: 20px;
            border-radius: 5px;
        }

    

    .beneficios__title h2 {
        font-size: 20px;
    }

    .beneficios__title p {
        font-size: 16px;
    }

    .faq__pregunta summary {
        font-size: 14px;
    }

    .faq__pregunta__content {
        font-size: 14px;
    }

    .faq__pregunta__content strong{
        font-size: 14px;
    }

    .sublist {
        margin-left: 1rem;
    }
}

@media (760px <= width <= 1025px) {
    .condiciones-seguro {
        align-items: center;
    }

    .footer__image-r{
        display: none;
    }
}