@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

* {
  font-family: "Inter", sans-serif;
}

.nav-link:hover {
  color: #e3be00;
  text-decoration: underline;
  transition: 0.5s;
}
.nav-item {
  margin-right: 30px;
}
.icons-menu {
  width: 30px;
}
.navbar-brand {
  margin-left: 20px;
}
.textos h1 {
  font-size: 5rem;
  letter-spacing: 2px;
  color: #e8df35;
}
.textos span {
  font-weight: 400;
  font-size: 2rem;
  color: #a2a2a2;
}

.textos p {
  text-align: center;
  font-weight: 200;
  font-size: 1.5rem;
  color: white;
}

/* Reglas globales: aplicar formato formal y iconos en todos los tamaños */
.navbar-nav .nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.navbar-nav .nav-link i,
.btn i {
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.95;
}

.icons-menu { width: 22px; height: auto; margin-right: 6px; }

/* Colores específicos para enlaces del nav */
.nav-venta {
  background-color: #0d6efd; /* azul profesional */
  color: #fff !important;
  padding: 6px 10px;
  border-radius: 6px;
}
.nav-venta:hover { background-color: #0b5ed7; }

.nav-blog {
  background-color: #17a2b8; /* teal */
  color: #fff !important;
  padding: 6px 10px;
  border-radius: 6px;
}
.nav-blog:hover { background-color: #138b94; }


/* Botón CTA de Ana Seguros: regla global para todos los tamaños */
.seguros-ana {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #c2002f;
  color: #fff !important;
  padding: 8px 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(194,0,47,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.seguros-ana:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(194,0,47,0.22);
  opacity: 0.98;
}


@media only screen and (max-width: 991px) {
  .container {
    margin-top: 4rem;
  }
  .textos h1 {
    font-size: 3rem;
  }

  .textos span {
    text-align: center;
    font-weight: 400;
    font-size: 2rem;
    color: #a2a2a2;
  }

  .textos p {
    text-align: center;
    font-weight: 200;
    font-size: 1.5rem;
    color: white;
  }
}

/* Estilos aplicados solo en pantallas grandes (desktop) */
@media only screen and (min-width: 992px) {
  /* Enlaces de navegación: tamaño más compacto y aspecto formal */
  .navbar-nav .nav-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
  }
  .navbar-nav{
  margin-right: 20px;
}

  /* Botones destacados del nav con estilo sobrio */
  .safetravel,
  .tips,
  .reparacion,
  .raiser,
  .btn-cambio,
  .seguros {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
  }

  .safetravel { background: #e8df35; color: #000 !important; }
  .tips { background-color: #f6a90d; color: #000 !important; }
  .reparacion { background-color: #00a9fe; color: #000 !important; }
  .raiser { background-color: #0a3cff; color: #fff !important; }
  .btn-cambio { background-color: #ffffff; color: #000 !important; }
  .seguros { background-color: transparent; color: #fff !important; padding: 4px 8px; font-weight: 600; }

  /* Hover: ligero y formal */
  .seguros-ana {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #c2002f;
    color: #fff !important;
    padding: 8px 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(194,0,47,0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  }

  .seguros-ana:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(194,0,47,0.22);
    opacity: 0.98;
  }

  @media only screen and (max-width: 991px) {
    .seguros-ana { font-size: 0.95rem; padding: 7px 14px; }
  }
  .navbar-nav .nav-link:hover,
  .safetravel:hover,
  .tips:hover,
  .reparacion:hover,
  .raiser:hover,
  .btn-cambio:hover,
  .seguros:hover {
    text-decoration: none;
    transform: translateY(-2px);
    opacity: 0.95;
  }

  /* Iconos de menú ligeramente más pequeños en desktop */
  .icons-menu { width: 22px; margin-right: 8px; }

  /* Separación más contenida entre items en desktop */
  .nav-item { margin-right: 18px; }
}

/* Estilos para pantallas tipo laptop (tabletas grandes / laptops) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-link {
    font-size: 0.9rem; /* más pequeño en laptops */
    font-weight: 600;
    padding: 5px 8px;
  }

  .nav-item { margin-right: 16px; }

  .icons-menu { width: 24px; margin-right: 6px; }

  .safetravel,
  .tips,
  .reparacion,
  .raiser,
  .btn-cambio,
  .seguros {
    font-size: 0.9rem;
    padding: 4px 8px;
  }
}

@media only screen and (min-width: 991px) and (max-width: 1538px){
  .navbar-nav .nav-link {
    font-size: .89rem; /* más pequeño en laptops */
    font-weight: 600;
    padding: 5px 8px;
  }
  .navbar-nav{
  margin-right: 20px;
}
}

/* Ajustes finales para móviles muy pequeños */
@media only screen and (max-width: 420px) {
  .seguros-ana { font-size: 0.9rem; padding: 6px 10px; gap: 6px; }
}