/*=============== IMPORT FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-hue: 224;
  --sat: 100%;
  --lig: 12%;
  --second-hue: 211;

  --first-color: hsl(var(--first-hue), var(--sat), var(--lig));
  --first-color-alt: hsl(var(--first-hue), 42%, 24%);
  --whimsicalblue-color: hsl(186, var(--sat), 50%);
  --title-color: hsl(0, 0%, 100%);
  --text-color: hsl(0, 0%, 100%);
  --text-color-light: hsla(0, 0%, 100%, 0.16);
  --body-color: hsl(var(--first-hue), var(--sat), var(--lig));

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --font-family: 'Montserrat', sans-serif;
  --body-font: var(--font-family);
  --title-font: var(--font-family);
  --biggest-font-size: 2.5rem;
  --h1-font-size: 1.75rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: .75rem;
  --normal-font-size: .8rem;
  --small-font-size: .675rem;
  --smaller-font-size: .613rem;
  --tiny-font-size: .625rem;

  /*========== Font weight ==========*/
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bolder: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/* Responsive typography */
@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 5rem;
    --h1-font-size: 3rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body,
button,
input,
textarea {
  font-family: var(--body-font);
  font-weight: var(--font-regular);
  font-size: var(--normal-font-size);
}

body {
  background-color: var(--body-color);
  color: var(--text-color);
  transition: .4s;
}

h1,
h2,
h3,
h4 {
  color: var(--title-color);
  font-weight: var(--font-semibold);
}

ul {
  list-style: none;
  padding-left: 0;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
}

/*=============== UTILITIES ===============*/
.fs-small {
  font-size: var(--small-font-size);
}

.fs-smaller {
  font-size: var(--smaller-font-size);
}

.fw-semibold {
  font-weight: var(--font-semibold);
}

.list-dot::before {
  content: "• ";
  color: white;
}

.fit-content {
  width: fit-content !important;
}

.noresize {
  resize: none;
}

.btn-gradient {
  background-image: linear-gradient(100deg, #1073DE, #52A5FF);
  border: none;
}

.biggest__title {
  max-width: 30rem;
  font-family: var(--title-font);
  font-weight: var(--font-bolder);
  font-size: var(--biggest-font-size);
  line-height: 1;
}

.section__title {
  font-family: var(--title-font);
  font-weight: var(--font-bolder);
  font-size: var(--h1-font-size);
  line-height: 1.5;
}

.section__subtitle {
  font-weight: var(--font-light);
  font-size: var(--h1-font-size);
  line-height: 1.5;
}

.text-whimsicalblue {
  color: var(--whimsicalblue-color) !important;
}

.line-light {
  position: relative;
  display: block;
  height: .5px;
  background-color: #fff;
  margin: 20px 0;
  border-radius: 10px;
}

@media screen and (min-width: 968px) {
  .line-light {
    width: 450px;
  }
}

@media screen and (max-width: 968px) {
  .container {
    padding: 0 2rem;
    text-align: center;
  }
}

/*=============== LANDING PAGE ===============*/
/* Site Header */
.header {
  background-color: var(--first-color);
}

.header .logo {
  max-width: 12rem;
}

@media screen and (min-width: 968px) {
  .header .logo {
    max-width: none;
  }
}

.header .dropdown-menu {
  background-color: var(--first-color-alt);
  transition: .25s ease-in-out;
}

.header .dropdown-menu .dropdown-item:hover {
  background-color: var(--first-color);
  transition: .25s ease-in-out;
}

.img-70 {
  width: 70%;
}

/* Hero Banner */
.hero-banner {
  background: transparent url('../img/hero-banner-background.png') 0% 0% no-repeat padding-box;
  background-size: cover;
}

/* Servicios  */
.servicios {
  background: transparent url('../img/servicios-background@2x.png') 0% 0% no-repeat padding-box;
  background-size: cover;
}

.intro-imagen-1 {
  width: 100%;
  height: 30rem;
  background: transparent url('../img/servicios-2.png') 0% 0% no-repeat padding-box;
  background-size: contain;
  mix-blend-mode: color-dodge;
  opacity: 0.68;
}

.intro-imagen-2 {
  position: absolute;
  left: 15%;
  top: 15%;
  width: 15rem;
  height: 20rem;
  background: transparent url('../img/servicios.png') 0% 0% no-repeat padding-box;
  background-size: contain;
  z-index: 0;
}

/* CONTACT SECTION */
.contacto {
  background: linear-gradient(158deg, #3D0D83, #0062FF);
}

.contacto__form textarea {
  height: 7rem;
}

/* FOOTER */

.footer p {
  font-size: smaller;
}

.new-app-biometrics-text {
       display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #00113d;
        color: white;
        padding: 20px 20px;
    }

    .new-app-biometrics-text .container {
      max-width: 1200px;
        margin: 0 auto;
    }

    .new-app-biometrics-text h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 30px;
  line-height: 1.4;
}

    .new-app-biometrics-text p {
  font-size: 1.1rem;
  line-height: 1.8; /* más separación entre líneas */
  margin-bottom: 20px; /* más espacio entre párrafos */
}

  .biometric-benefits {
  background-color: #00113d;
  padding: 60px 20px;
  color: white;
  font-family: 'Montserrat', sans-serif;
}

.benefits-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.benefit-card {
  background-color: #1d2f5c;
  border-radius: 16px;
  padding: 30px 20px;
  width: 260px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

.benefit-icon {
  width: 60px;
  height: auto;
  margin: 0 auto 16px;
  background: none; /* Quitar el círculo azul */
  border-radius: 0;  /* Quitar borde redondeado */
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefit-icon img {
  width: 70px; /* Puedes subir a 50 o 60 si deseas más grande */
  height: auto;
}

.benefit-card h4 {
  font-size: 1rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.benefit-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}
.feature-list {
  background-color: #00113d;
  color: white;
  font-family: 'Montserrat', sans-serif;
  padding: 40px 20px;
}

.feature-list ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0 auto;
  max-width: 800px;
}

.feature-list li {
  margin-bottom: 12px;
  font-size: 1.2rem;
  line-height: 1.6;
}