html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* Eliminado el margin-bottom que provocaba scroll extra. */
body {
    margin-bottom: 0;
    background-color: #FBFBFB;
}

/* Full-bleed para ocupar todo el ancho del viewport aunque esté dentro de un .container */
.full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw); /* centra el full-bleed respecto al viewport */
}

/* Contenedor que ocupa la altura disponible (puedes ajustar el 120px según header/footer reales)
   y centra su contenido con flexbox */
.full-viewport {
  height: calc(100vh - 120px);
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FBFBFB;
}

/* Index hero image: 50% width por defecto, con límite y ajuste en móviles */
.index-hero img {
  width: 75%;  
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Ajuste para pantallas muy pequeñas: mejorar usabilidad */
@media (max-width: 576px) {
  .index-hero img {
    width: 80%;
    max-width: none;
  }
}

/* Botón personalizado */
.btn-start, .btn-access, .btn-app {
    padding: 0.75rem 1.5rem;
    font-size: 1.05rem;
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.18);
    background: linear-gradient(180deg, #0d6efd, #0b5ed7);
    border: none;
    color: #fff;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
    display: inline-block;
    text-decoration: none;
}

/* Estados interactivos */
.btn-start:hover,
.btn-start:focus,
.btn-access:hover,
.btn-access:focus,
.btn-app:hover,
.btn-app:focus
{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(2, 132, 199, 0.24);
    background: linear-gradient(180deg, #0b5ed7, #084298);
    color: #fff;
}

.btn-start:active, .btn-access:active, .btn-app:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.18);
}

/* Si necesitas que el botón ocupe toda la anchura en móviles */
@media (max-width: 576px) {
  .btn-start, .btn-access, .btn-app {
    width: 90%;
    display: block;
    margin: 0.5rem auto 0;
    text-align: center;
  }
}

/* Logo en el navbar (header) */
.navbar-brand-logo {
  height: 60px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Ajuste en pantallas pequeñas */
@media (max-width: 576px) {
  .navbar-brand-logo {
    height: 28px;
  }
}

/* Si quieres más separación entre logo y el resto de nav */
.navbar .navbar-brand {
  margin-right: 0.5rem;
}

/* Mejoras de maquetación para la página principal */
.hero-image-wrapper {
    margin: -2rem auto 3rem;
    max-width: 400px;
}

.hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.display-4 {
    font-size: calc(1.8rem + 2vw);
    line-height: 1.2;
    color: #1a1a1a;
}

.lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #4b5563;
}

.benefits-wrapper {
    font-size: 0.95rem;
}

.benefit-item {
    color: #6b7280;
}

.separator {
    color: #d1d5db;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-image-wrapper {
        margin: -1rem auto 2rem;
    }

    .display-4 {
        font-size: calc(1.6rem + 1.5vw);
    }

    .lead {
        font-size: 1.1rem;
    }

    .benefits-wrapper {
        font-size: 0.85rem;
    }
}

/* Mejora la experiencia en dispositivos muy pequeños */
@media (max-width: 576px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .hero-content {
        padding: 0 0.5rem;
    }
}

/* Estilos para las páginas de Create y Access */
.form-control-lg {
    padding: 1rem;
    font-size: 1rem;
}

.card {
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
}

.card-title {
    color: #1a1a1a;
    font-weight: 600;
}

.btn-primary {
    padding: 0.8rem 1.5rem;
    font-weight: 500;
}

.form-check-label {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .container.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Añadir al final del archivo */
.scanning-line {
    width: 100%;
    height: 2px;
    background: rgba(82, 168, 236, 0.8);
    animation: scan 2s linear infinite;
}

@keyframes scan {
    0% { transform: translateY(-100px); }
    50% { transform: translateY(100px); }
    100% { transform: translateY(-100px); }
}