/* ==================================================
   HERRAMIENTAS · ONLINE NAVARRA
================================================== */

.herramientas-page {
   width: 100%;
   background: #fff;
}


/* ==================================================
   HERO
================================================== */
.tools-hero {
   position: relative;
   box-sizing: border-box;
   width: var(--hero-width);
   height: var(--hero-height);
   min-height: var(--hero-height);
   margin: 0 auto;
   display: grid;
   grid-template-columns:
      minmax(0, 1.35fr)
      minmax(280px, .65fr);
   align-items: center;
   gap: 55px;
   padding: 65px 6% 105px;
   overflow: hidden;
   background: linear-gradient(
      110deg,
      #43002f 0%,
      #79005d 46%,
      #d0008d 100%
   );
   border-radius: var(--hero-radius);
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
}


/* CÍRCULO DECORATIVO */

.tools-hero::before {
   content: "";

   position: absolute;

   width: 430px;
   height: 430px;

   right: -205px;
   top: -220px;

   border:
      1px solid
      rgba(255, 255, 255, .09);

   border-radius: 50%;

   pointer-events: none;
}


/* ==================================================
   HERO · CONTENIDO
================================================== */

.tools-hero__inner {
   position: relative;
   z-index: 2;
   min-width: 0;
   text-align: left;
}


/* KICKER */

.tools-hero__kicker {
   margin: 0 0 20px;
   color: #fff;
   font-size: .76rem;
   line-height: 1;
   font-weight: 800;
   letter-spacing: .09em;
   text-align: left;    
}


/* H1 */

.tools-hero h1 {
   max-width: 620px;
   margin: 0 0 25px;
   color: #fff;
   font-size: clamp(3.1rem,4.5vw,4.5rem);
   line-height: 1;
   font-weight: 800;
   letter-spacing: -2.2px;
   text-align: left;
}


/* SEGUNDA PARTE H1 */

.tools-hero h1 span {
   display: block;
   background: linear-gradient( 90deg, #ffffff 0%, #ffffff 20%, #ff8bd7 68%, #ff4fc3 100% );
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.tools-hero .punto-bote {
   display: inline-block;
   width: 13px;
   height: 13px;
   margin-left: 8px;
   border-radius: 50%;

   background: #ffd400;
   -webkit-text-fill-color: #ffd400;

   vertical-align: baseline;
   animation: tools-punto-bote 1.8s ease-in-out infinite;
}

@keyframes tools-punto-bote {
   0%, 100% {transform: translateY(0);}
   45% {transform: translateY(-10px);}
   65% {transform: translateY(0);}
   78% {transform: translateY(-4px);}
}

@media (prefers-reduced-motion: reduce) {
   .tools-hero .punto-bote {
      animation: none;
   }
}

/* INTRO */

.tools-hero__intro {
   max-width: 610px;
   margin: 0;
   color: rgba(255,255,255,.92);
   font-size: 1.04rem;
   line-height: 1.65;
    text-align: left;
}


/* ==================================================
   HERO · VISUAL
================================================== */

.tools-hero__visual {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   min-width: 0;
   padding-left: 48px;
   border-left: 1px solid rgba(255,255,255,.35);
}

.tools-hero__visual span,
.tools-hero__visual strong {
   display: block;
   margin: 0;
   font-size: clamp(2.3rem,3.5vw,3.7rem);
   line-height: .98;
   font-weight: 800;
   letter-spacing: -1.5px;
}
.tools-hero__visual span { color: rgba( 255,255,255,.38);}
.tools-hero__visual strong {color: #fff;}


/* ==================================================
   SEPARADOR
================================================== */

.tools-separador {
   position: relative;
   width: min(1180px, 88%);
   height: 1px;
   margin: 0 auto;
   background: #e6e1e6;
}


.tools-separador span {
   position: absolute;
   width: 82px;
   height: 3px;
   left: 50%;
   top: -1px;
   transform:translateX(-50%);
   background: #c00087;
}


/* ==================================================
   LISTADO HERRAMIENTAS
================================================== */

.tools-list {
   box-sizing: border-box;
   width: min(1180px, 88%);
   margin: 5rem auto 0    ;
   padding: 0px 0 90px;
}


/* CABECERA */

.tools-list__head {
   max-width: 760px;
   margin: 0 auto 42px;
   text-align: center;
}

.tools-kicker {
    margin:0 0 12px;
   color: #c00087;
   font-size: 1rem;
   line-height: 1;
   font-weight: 800;
   letter-spacing: .1em;
}

.tools-list__head h2 {
   margin: 0 0 15px;
   color: #29274c;
   font-size: clamp(2.1rem, 3.4vw, 3rem);
   line-height: 1.08;
   font-weight: 800;
   letter-spacing: -.8px;
}


.tools-list__head h2 span {
   font-weight: 800;
   background: linear-gradient(90deg,#c00087,#29274c);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color:
      transparent;
   color: transparent;
}

.tools-list__head > p {
   max-width: 690px;
   margin: 0 auto;
   color: #595568;
   font-size: 1.2rem;
   line-height: 1.6;
}

/* ==================================================
   GRID
================================================== */

.tools-grid {
   display: grid;

   grid-template-columns:
      repeat(
         3,
         minmax(0, 1fr)
      );

   gap: 18px;
}


/* ==================================================
   TARJETA
================================================== */

.tool-card {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 315px;
   padding: 28px 29px 26px;
   background: #fff;
   border:1px solid #f02aa4;
   border-radius: 18px;
   color: #29274c;
   text-decoration: none;
   transition: transform .2s ease, border-color .2s ease,box-shadow .2s ease;
   text-align: left;
}

.tool-card:hover { 
   transform:translateY(-4px);
   border-color:#ed008c;
   box-shadow:0 14px 30px rgba(41,39,76,.08);
   text-decoration: none;
}


/* ==================================================
   CABECERA TARJETA
================================================== */

.tool-card__top {
   display: flex;
   justify-content:space-between;
   align-items:flex-start;
   gap: 15px;
   margin:0 0 34px;
}

.tool-card__type {
   display: flex;
   align-items: center;
   gap: 6px;
   margin: 0;
   color: #817c88;
   font-size: .72rem;
   line-height: 1.2;
   font-weight: 800;
   letter-spacing: .08em;
}

.tool-card__type span { color: #ed008c;}
.tool-card__type i { color: #bbb5bb;font-style: normal;}

/* FLECHA SUPERIOR */

.tool-card__arrow {
   flex: 0 0 auto;
   color: #aaa4aa;
   font-size: 1.1rem;
   line-height: 1;
   transition: color .2s ease, transform .2s ease;
}

.tool-card:hover
.tool-card__arrow {
   color: #ed008c;
   transform: translate(2px,-2px);
}


/* ==================================================
   CONTENIDO TARJETA
================================================== */

.tool-card__body {min-width: 0;}
.tool-card__body h3 {
   max-width: 290px;
   margin: 0 0 15px;
   color: #29274c;
   font-size: 1.42rem;
   line-height: 1.2;
   font-weight: 650;
   letter-spacing: -.3px;
}

.tool-card__body p {
   margin: 0;
   color: #595568;
   font-size: .94rem;
   line-height: 1.6;
}

/* CTA */

.tool-card__cta {
   display: flex;
   align-items: center;
   gap: 7px;
   margin-top: auto;
   padding-top: 25px;
   color: #c00087;
   font-size: .96rem;
   line-height: 1.2;
   font-weight: 750;
}

.tool-card__cta span { transition: transform .2s ease;}
.tool-card:hover
.tool-card__cta span {transform: translateX(4px);}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

   .tools-hero { height: auto; min-height: 0; }
   .tools-hero {
      min-height: auto;
      grid-template-columns:1fr;
      gap: 38px;
      padding: 58px 7% 105px;
      clip-path:polygon( 0 0,100% 0, 100% 100%, 0 92%);
   }

   .tools-hero__visual {
      padding: 27px 0 0;
      border-left: 0;
      border-top:1px solid rgba(255,255,255,.35 );
   }

   .tools-grid {grid-template-columns:1fr; }
   .tool-card {min-height: 235px;}
   .tool-card__top { margin-bottom: 25px;}
}

/* ==================================================
   MÓVIL
================================================== */

@media (max-width: 600px) {

   .tools-hero,
   .tools-list,
   .tools-more,
   .tools-separador {
      width: 90%;
   }

   .tools-hero {
      margin: 15px auto 55px;
      padding: 45px 7% 85px;
      gap: 32px;
      border-radius: 20px;
      clip-path: polygon(0 0, 100% 0,100% 100%,0 94% );
   }

   .tools-hero__kicker {
      margin-bottom: 16px;
      font-size: .68rem;
   }

   .tools-hero h1 {
      margin-bottom: 20px;
      font-size: clamp( 2.45rem, 11vw, 3.25rem);
      line-height: 1;
      letter-spacing: -1.4px;
   }

   .tools-hero__intro {
      font-size: .95rem;
      line-height: 1.6;
   }


   .tools-hero__visual {
      padding-top: 23px;
   }

   .tools-hero__visual span,
   .tools-hero__visual strong {
      font-size: clamp(1.75rem,8.5vw, 2.5rem);
      letter-spacing: -.8px;
   }

   /* LISTADO */

   .tools-list { padding:58px 0 65px;}
   .tools-list__head { margin-bottom: 30px; }
   .tools-list__head h2 {font-size: 2rem;}

   /* TARJETAS */

   .tool-card { min-height: 245px; padding:24px 23px; border-radius: 16px;}
   .tool-card__top {margin-bottom: 24px;}
   .tool-card__body h3 {font-size: 1.3rem;}
   .tool-card__body p { font-size: .92rem;}
}

@media (max-width: 800px) {
   .tools-hero { min-height: 0; }
}