/* ==================================================
   COMPONENTES COMUNES
   Online Navarra
================================================== */


/* ==================================================
   CONTENEDOR GENERAL
================================================== */

.comp-wrap {
   width: min(1180px, 88%);
   margin: 0 auto;
}


/* ==================================================
   TEXTOS AUXILIARES
================================================== */

.comp-kicker,
.comp-eyebrow {
   margin: 0 0 18px;
   font-size: 13px;
   line-height: 1.2;
   font-weight: 700;
   letter-spacing: 1.6px;
   text-transform: uppercase;
}

.comp-kicker {
   margin-bottom: 10px;
   color: #c00087;
}


/* ==================================================
   HERO
================================================== */

.comp-hero {
   position: relative;
   width: 90%;
   min-height: 520px;
   margin: 0 auto 30px;
   overflow: visible;
}

.comp-hero__fondo {
   position: absolute;
   z-index: 0;
   inset: 0;
   overflow: hidden;
   border-radius: 28px;
   clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 88%
   );
}

.comp-hero__inner {
   position: relative;
   z-index: 2;
   /*width: min(1180px, 88%);*/
   min-height: 520px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 36% 64%;
   align-items: center;
}


/* IMAGEN HERO */

.comp-hero__imagen {
   position: relative;
   min-height: 520px;
   align-self: stretch;
}

.comp-hero__imagen img {
   position: absolute;
   z-index: 3;
   width: auto;
   max-width: 100%;
   height: clamp(410px, 31vw, 490px);
   left: 28%;
   bottom: 0;
   transform: translateX(-50%);
}


/* TEXTO HERO */

.comp-hero__texto {
   position: relative;
   z-index: 4;
   width: 100%;
   max-width: 700px;
   padding: 20px 25px 45px;
   text-align: left;
}

.comp-hero h1 {
   margin: 0 0 25px;
   font-size: clamp(50px, 4.7vw, 72px);
   line-height: 1.07;
   font-weight: 700;
   letter-spacing: -1.5px;
}

.comp-hero__texto > p:not(.comp-eyebrow) {
   max-width: 680px;
   margin: 0;
   font-size: 20px;
   line-height: 1.55;
   text-align: left;
}

.comp-card ul {
   margin: 0 0 20px;
   padding: 0;
   list-style: none;
}

.comp-card li {
   position: relative;
   padding-left: 28px;
}

.comp-card li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 4px;
   width: 20px;
   height: 20px;
   background: url("../img/accept.png") no-repeat center;
   background-size: contain;
}
/* ==================================================
   HERO - TABLET Y PANTALLAS MEDIAS
================================================== */

@media (max-width: 1200px) {

   .comp-hero {
      width: 95%;
      min-height: auto;
      margin:0 auto 30px;
   }
   .comp-hero__inner {
      width: 100%;
      min-height: 520px;
      display: grid;
      grid-template-columns: 38% 62%;
      align-items: center;
   }

   .comp-hero__imagen {min-height: 520px; }
   .comp-hero__imagen img {
      height: clamp(380px, 43vw, 450px);
      left: 42%;
      bottom: 10px;
      transform: translateX(-50%);
   }

   .comp-hero__texto {
      width: auto;
      max-width: none;
      padding: 0px 40px 70px 0;
   }

   .comp-hero h1 {
      max-width: 100%;

      font-size: clamp(43px, 5.3vw, 56px);
      line-height: 1.06;
   }

   .comp-hero__texto > p:not(.comp-eyebrow) {
      max-width: 100%;

      font-size: 18px;
      line-height: 1.5;
   }
}


/* ==================================================
   HERO - TABLET VERTICAL
================================================== */

@media (max-width: 800px) {

     .comp-hero__inner {
      width: 86%;
      min-height: auto;
      display: flex;
      flex-direction: column;
   }

   .comp-hero__texto {
      order: 1;
      width: 100%;
      padding: 55px 0 20px;
   }

   .comp-hero__imagen {
      order: 2;
      width: 100%;
      min-height: 300px;
   }

   .comp-hero__imagen img {
      height: 350px;
      left: 50%;
      bottom: -10%;
      transform: translateX(-50%);
   }

   .comp-hero h1 {
      max-width: 620px;
      font-size: 46px;
   }

   .comp-hero__texto > p:not(.comp-eyebrow) {
      max-width: 600px;

      font-size: 17px;
   }
}


/* ==================================================
   HERO - MÓVIL
================================================== */

@media (max-width: 600px) {

   .comp-hero {
      width: calc(100% - 24px);
      margin: 0 auto 15px;
   }

   .comp-hero__fondo {
      border-radius: 22px;
      clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
   }

   .comp-hero__inner {
      width: 86%;
   }

   .comp-hero__texto {
      padding: 40px 0 15px;
   }

   .comp-eyebrow {
      margin-bottom: 14px;
      font-size: 11px;
   }

   .comp-hero h1 {
      margin-bottom: 22px;
      font-size: clamp(35px, 10vw, 43px);
      line-height: 1.07;
      letter-spacing: -.7px;
   }

   .comp-hero__texto > p:not(.comp-eyebrow) {
      font-size: 16px;
      line-height: 1.5;
   }

   .comp-hero__imagen {
      min-height: 255px;
   }

   .comp-hero__imagen img {
      height: 300px;
   }
}


/* ==================================================
   HERO - MÓVIL PEQUEÑO
================================================== */

@media (max-width: 420px) {

   .comp-hero__texto {
      padding-top: 35px;
   }

   .comp-hero h1 {
      font-size: 34px;
   }

   .comp-hero__texto > p:not(.comp-eyebrow) {
      font-size: 15px;
   }

   .comp-hero__imagen {
      min-height: 255px;
   }

   .comp-hero__imagen img {
      height: 270px;
   }
}

/* ==================================================
   SECCIONES
================================================== */

.comp-seccion {
   padding:110px 0;
}

.comp-seccion--compacta {
   padding: 45px 0;
}


/* ==================================================
   CABECERA DE SECCIÓN
================================================== */

.comp-section-head {
   max-width: 720px;

   margin: 0 auto 40px;

   text-align: center;
}

.comp-section-head--left {
   margin-left: 0;
   margin-right: 0;

   text-align: left;
}

.comp-section-head h2 {
   margin: 0 0 10px;

   color: #29274c;

   font-size: 38px;
   line-height: 1.15;
   font-weight: 700;
}

.comp-section-head p {
   margin: 0;

   color: #817c88;

   font-size: 18px;
   line-height: 1.55;
}


/* ==================================================
   TÍTULO DE SECCIÓN SIMPLE
================================================== */

.comp-titulo-seccion {
   margin-bottom: 50px;
}

.comp-titulo-seccion h2 {
   margin: 0;

   color: #29274c;

   font-size: 38px;
   line-height: 1.15;
   font-weight: 700;
}


/* ==================================================
   SECCIÓN TEXTO + IMAGEN
================================================== */

.comp-dos-columnas {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 75px;
   align-items: center;
}


/* TEXTO */

.comp-dos-columnas__texto {
   text-align: left;
}

.comp-dos-columnas__texto h2 {
   max-width: 520px;
   margin: 0 0 30px;
   color: #29274c;
   font-size: clamp(36px, 4vw, 50px);
   line-height: 1.08;
   font-weight: 700;
}

.comp-dos-columnas__texto p {
   margin-top: 0;
   color: #555;
   font-size: 16px;
   line-height: 1.65;
   text-align: left;
}

.comp-dos-columnas__texto .comp-intro {
   max-width: 520px;
   margin-bottom: 20px;
   color: #29274c;
   font-weight: 600;
}

.comp-dos-columnas__cierre {
   margin-top: 22px;
}


/* IMAGEN */

.comp-dos-columnas__imagen {
   margin: 0;
   text-align: center;
}

.comp-dos-columnas__imagen-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 390px;
}

.comp-dos-columnas__imagen img {
   display: block;
   width: 100%;
   height: auto;
   margin: 0 auto;
}

.comp-dos-columnas__imagen figcaption {
   max-width: 500px;
   margin: 15px auto 0;
   color: #9993a0;
   font-size: 13px;
   line-height: 1.5;
}


/* ==================================================
   LISTA DESTACADA
================================================== */

.comp-lista {
   margin: 20px 0;
   padding: 0;
   list-style: none;
}

.comp-lista li {
   position: relative;
   margin: 7px 0;
   padding: 10px 15px 10px 38px;
   border-radius: 4px;
   color: #595568;
   font-size: 16px;
   line-height: 1.35;
   text-align: left;
}

.comp-lista li::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 14px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   transform: translateY(-50%);
}


/* ==================================================
   FRASE DESTACADA
================================================== */

.comp-frase {
   padding: 0;
}

.comp-frase blockquote {
   position: relative;
   max-width: 850px;
   margin: 0 auto;
   padding-left: 85px;
   text-align: left;
}

.comp-frase p {
   margin: 0;
   font-family: "Nunito", "Manrope", sans-serif;
   font-size: 28px;
   line-height: 1.45;
   font-weight: 600;
   letter-spacing: -.2px;
}

.comp-frase__comillas {
   position: absolute;
   top: -25px;
   left: 0;
   font-family: Georgia, serif;
   font-size: 105px;
   line-height: 1;
   font-weight: 700;
}


/* ==================================================
   TARJETAS
================================================== */

.comp-cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
}

.comp-card {
   display: flex;
   flex-direction: column;
   padding: 0px 28px 30px;
   background: #fff;
   border: 1px solid #f8f8f8;
   border-radius: 22px;
   text-align: left;
   box-shadow: 0 10px 50px rgba(40, 38, 75, .07);
}


/* IMAGEN TARJETA */

.comp-card__imagen {
   display: flex;
   align-items: center;
   justify-content: center;
}

.comp-card__imagen img {
   display: block;
   width: auto;
   max-width: 90%;
   height: auto;
}


/* TEXTO TARJETA */

.comp-card h3 {
   margin: 0 0 14px;
   color: #29274c;
   font-size: 20px;
   line-height: 1.25;
   font-weight: 700;
}

.comp-card p {
   margin: 0 0 15px;
   color: #5f5c6b;
   font-size: 16px;
   line-height: 1.6;
}

.comp-card ul {
   margin: 0 0 20px;
   padding-left: 20px;
}

.comp-card li {
   color: #5f5c6b;
   font-size: 16px;
   line-height: 1.6;
}

.comp-card__destacado {
   margin-top: 22px !important;
}

.comp-card__destacado strong {
   color: #29274c;
}


/* ENLACE TARJETA */

.comp-card__enlace {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   align-self: center;
   margin-top: auto;
   padding: 10px 20px;
   border: 2px solid #c00087;
   border-radius: 50px;
   color: #c00087;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.2;
   text-decoration: none;
   transition: background .2s ease, color .2s ease;
}

.comp-card__enlace::after {
   content: "→";
   margin-left: 8px;
}

.comp-card__enlace:hover {
   background: #c00087;
   color: #fff!important;
   text-decoration: none;
}


/* ==================================================
   GRID INFORMATIVO / 4 ELEMENTOS
================================================== */

.comp-info {
   padding: 90px 0 90px;
}

.comp-info .comp-section-head {
   max-width: 700px;
   margin: 0 auto 38px;
   text-align: center;
}

.comp-info .comp-section-head h2 {
   margin: 0 0 8px;
   font-size: 28px;
}

.comp-info .comp-section-head p {
   font-size: 18px;
   line-height: 1.5;
}

.comp-info-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   padding: 22px;
   background: #f6f3f6;
   border-radius: 18px;
}

.comp-info-grid article {
   min-height: 185px;
   padding: 25px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   background: #fff;
   border-radius: 10px;
   text-align: center;
}


/* ICONO */

.comp-info-grid__icono {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 65px;
   margin: 0 auto 16px;
}

.comp-info-grid__icono img {
   display: block;
   width: 100%;
   height: auto;
}


/* TEXTO */

.comp-info-grid h3 {
   margin: 0 0 8px;
   color: #29274c;
   font-size: 18px;
   line-height: 1.35;
   font-weight: 700;
}

.comp-info-grid p {
   max-width: 210px;
   margin: 0;
   color: #817c88;
   font-size: 16px;
   line-height: 1.5;
}


/* ==================================================
   CTA FINAL
================================================== */

.comp-final {
   padding: 30px 0 90px;
}

.comp-cta {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 65px;
   align-items: center;
   padding: 52px 65px 48px;
   background: #eaf5ff;
   border-radius: 22px;
    width: 78%;
    margin: 0 auto;
}


/* TEXTO CTA */

.comp-cta__texto {
   text-align: left;
}

.comp-cta__texto .comp-kicker {
   margin-bottom: 14px;
}

.comp-cta__texto h2 {
   max-width: 520px;
   margin: 0 0 25px;
   color: #29274c;
   font-size: clamp(40px, 3.7vw, 52px);
   line-height: 1.08;
   font-weight: 700;
   letter-spacing: -1px;
}

.comp-cta__texto > p:not(.comp-kicker) {
   max-width: 570px;
   margin: 0;
   color: #686575;
   font-size: 18px;
   line-height: 1.7;
   text-align: left;
}


/* IMAGEN CTA */

.comp-cta__imagen {
   margin: 0;
   text-align: center;
}

.comp-cta__imagen img {
   display: block;
   width: 100%;
   max-width:400px;
   height: auto;
   margin: 0 auto;
}

.comp-cta__imagen figcaption {
   max-width: 470px;
   margin: 10px auto 0;
   color: #92909c;
   font-size: 13px;
   line-height: 1.45;
}

.comp-cta__imagen figcaption strong {
   color: #77727f;
   font-weight: 700;
}


/* ==================================================
   BOTÓN DE COMPONENTES
================================================== */

.comp-boton {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-top: 27px;
   padding: 16px 24px;
   background: transparent;
   border: 2px solid #29274c;
   border-radius: 50px;
   color: #29274c;
   font-size: 18px;
   line-height: 1;
   font-weight: 700;
   text-decoration: none;
   transition:
      background .2s ease,
      color .2s ease;
}

.comp-boton:hover {
   background: #29274c;
   color: #fff;
}


/* ==================================================
   RESPONSIVE - TABLET
================================================== */

@media (max-width: 900px) {

   /* DOS COLUMNAS */

   .comp-dos-columnas {
      grid-template-columns: 1fr;
      gap: 35px;
   }

   .comp-dos-columnas__imagen-wrap {
      min-height: auto;
   }


   /* TARJETAS */

   .comp-cards {
      grid-template-columns: 1fr;
      max-width: 600px;
      margin: 0 auto;
   }


   /* INFO */

   .comp-info-grid {
      grid-template-columns: repeat(2, 1fr);
   }


   /* CTA */

   .comp-cta {
      grid-template-columns: 1fr;
      gap: 35px;
      padding: 45px 40px;
   }

   .comp-cta__texto {
      max-width: 650px;
   }

   .comp-cta__imagen img {
      max-width: 550px;
   }
}


/* ==================================================
   RESPONSIVE - MÓVIL
================================================== */

@media (max-width: 600px) {

   /* CONTENEDOR */

   .comp-wrap {
      width: 90%;
   }
  
   /* SECCIONES */

   .comp-seccion {
      padding: 35px 0 25px;
   }


   /* DOS COLUMNAS */

   .comp-dos-columnas__texto h2 {
      margin-bottom: 24px;
      font-size: 35px;
   }

   .comp-lista li {
      font-size: 14px;
   }


   /* FRASE */

   .comp-frase {
      padding: 25px 0 30px;
   }

   .comp-frase blockquote {
      padding-left: 35px;
   }

   .comp-frase p {
      font-size: 17px;
   }

   .comp-frase__comillas {
      top: -12px;
      font-size: 65px;
   }


   /* TÍTULOS */

   .comp-titulo-seccion {
      margin-bottom: 35px;
   }

   .comp-titulo-seccion h2,
   .comp-section-head h2 {
      font-size: 32px;
   }

   .comp-section-head p {
      font-size: 16px;
   }


   /* TARJETAS */

   .comp-card {
      padding: 0 24px 30px;
   }

   /* INFO */

   .comp-info {
      padding: 35px 0 70px;
   }

   .comp-info .comp-section-head {
      margin-bottom: 30px;
   }

   .comp-info .comp-section-head h2 {
      font-size: 28px;
   }

   .comp-info .comp-section-head p {
      font-size: 16px;
   }

   .comp-info-grid {
      grid-template-columns: 1fr;
      padding: 18px;
   }

   .comp-info-grid article {
      min-height: auto;
   }


   /* CTA */

   .comp-final {
      padding: 20px 0 0px;
   }

   .comp-cta {
      gap: 30px;
      padding: 35px 25px;
      border-radius: 0px;
   }

   .comp-cta__texto h2 {
      font-size: 36px;
      letter-spacing: -.5px;
   }

   .comp-cta__texto > p:not(.comp-kicker) {
      font-size: 15px;
   }
    .comp-cta__imagen img {
   max-width:300px;
}

   .comp-cta__imagen figcaption {
      font-size: 12px;
   }
}