/* Fondo general */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  min-height: 100vh; /* asegura que cubra toda la ventana */
  background-image: url('../img/back.png'); /* tu imagen */
  background-repeat: no-repeat; /* no se repite */
  background-position: center center; /* centrada en ambos ejes */
  background-size: cover; /* ajusta para cubrir toda la pantalla */
  background-attachment: fixed; /* efecto fijo al hacer scroll */
  color: white;

/* ====== INFO-BOXES (Servicios detallados) ====== */
.info-boxes {
  display: grid;                         /* Activa CSS Grid */
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  gap: 1.5rem;                           /* Espacio entre cuadros */
  margin: 2rem;                          /* Margen alrededor */
}

.info-box {
  border-radius: 12px;                   /* Bordes redondeados */
  padding: 1.5rem;                       /* Espaciado interno */
  color: #333;                           /* Color del texto */
  background: rgba(255, 255, 255, 0.2);  /* Fondo semitransparente */
  backdrop-filter: blur(10px);           /* Efecto desenfoque */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);/* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación hover */
}

.info-box:hover {
  transform: translateY(-5px);           /* Se eleva al pasar el mouse */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Sombra más fuerte */
}

.info-box h3 {
  margin-top: 0;                         /* Quita margen superior */
  font-size: 1.3rem;                     /* Tamaño título */
  text-align: center;                    /* Centrado */
  color: #050C6F;                        /* Color título */
}

.info-box ul {
  margin: 0.8rem 0 0;                    /* Margen superior */
  padding-left: 0;                       /* Quita sangría */
  list-style: none;                      /* Sin viñetas */
}

.info-box ul li {
  margin: 0.5rem 0;                      /* Espacio entre ítems */
  padding-left: 1.5rem;                  /* Sangría para ícono */
  position: relative;                    /* Necesario para ícono */
  color: #222;                           /* Color ítems */
}

.info-box ul li::before {
  content: "✔️";                         /* Ícono personalizado */
  position: absolute;                    /* Posición absoluta */
  left: 0;                               /* A la izquierda */
}

.tarifa {
  margin-top: 1.2rem;                    /* Espacio superior */
  text-align: center;                    /* Centrado */
  background: rgba(255,255,255,0.25);    /* Fondo semitransparente */
  backdrop-filter: blur(6px);            /* Desenfoque */
  padding: 1rem;                         /* Espaciado interno */
  border-radius: 10px;                   /* Bordes redondeados */
}

.tarifa .precio {
  font-size: 2rem;                       /* Tamaño grande */
  font-weight: bold;                     /* Negrita */
  color: #050C6F;                        /* Color precio */
  margin-right: 0.3rem;                  /* Espacio derecha */
}

.tarifa .detalle {
  font-size: 1.2rem;                     /* Tamaño medio */
  font-weight: 600;                      /* Semi-negrita */
  color: #333;                           /* Color detalle */
}

.tarifa .nota {
  font-size: 0.85rem;                    /* Texto pequeño */
  color: #555;                           /* Color gris */
  margin: 0.3rem 0 0;                    /* Margen superior */
}

.btn-casillero {
  display: inline-block;                 /* Botón en línea */
  margin-top: 1rem;                      /* Espacio superior */
  background: #10B981;                   /* Fondo verde */
  color: white;                          /* Texto blanco */
  padding: 10px 20px;                    /* Espaciado interno */
  border-radius: 8px;                    /* Bordes redondeados */
  text-decoration: none;                 /* Quita subrayado */
  font-weight: bold;                     /* Negrita */
}

.btn-casillero:hover {
  background: #0F9A6F;                   /* Verde más oscuro al hover */
}

/* ====== RESPONSIVO ====== */
@media (max-width: 900px) {
  .info-boxes {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    /* Se adaptan automáticamente en pantallas pequeñas */
  }
}


/* ====== NAV (Barra de navegación) ====== */
/* NAV general */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}

.logo {
  font-weight: bold;
  font-size: 24px;
  color: #10B981;
}

/* Menú normal */
.menu a {
  margin-left: 20px;
  text-decoration: none;
  color: white;
  opacity: 0.9;
}

/* Botones especiales */
.btn-whatsapp {
  background: #25D366; /* Verde WhatsApp */
  padding: 8px 16px;
  border-radius: 6px;
  color: white;
}

.btn-login {
  background: #0F172A; /* Azul oscuro */
  padding: 8px 16px;
  border-radius: 6px;
  color: white;
}

.btn-register {
  background: #10B981; /* Verde corporativo */
  padding: 8px 16px;
  border-radius: 6px;
  color: white;
}
.hamburger {
  display: none; /* Oculto en PC y tablet */
  font-size: 28px;
  cursor: pointer;
  color: white;
}

@media (max-width: 768px) {
  .hamburger {
    display: block; /* Visible en móvil */
  }
}
/* Responsive */
@media (max-width: 768px) {
  .menu {
    display: none; /* Oculto por defecto en móvil */
    flex-direction: column;
    background: rgba(0,0,0,0.9);
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    padding: 20px;
  }

  .menu a {
    margin: 10px 0;
  }

  .hamburger {
    display: block; /* Visible en móvil */
  }
}

/* ====== BOTONES ====== */
.btn {
  background: #10B981; /* Fondo verde */
  padding: 14px 28px; /* Tamaño del botón */
  border-radius: 30px; /* Bordes redondeados */
  text-decoration: none; /* Quita subrayado */
  color: white; /* Texto blanco */
  display: inline-block; /* Se comporta como bloque en línea */
  margin-top: 20px; /* Espacio superior */
}

.btn-outline {
  border: 1px solid #10B981; /* Borde verde */
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  color: #10B981; /* Texto verde */
}

/* ====== SECCIONES ====== */
.section {
  padding: 60px 40px; /* Espaciado interno */
  text-align: center; /* Centra el contenido */
}

/* ====== CARDS (Bloques de beneficios/servicios) ====== */
.cards {
  display: flex; /* Coloca las tarjetas en fila */
  gap: 20px; /* Espacio entre tarjetas */
  justify-content: center; /* Centra horizontalmente */
  flex-wrap: wrap; /* Permite que bajen a otra línea si no caben */
}

.card {
  background: rgba(255,255,255,0.05); /* Fondo semitransparente */
  padding: 25px; /* Espaciado interno */
  border-radius: 15px; /* Bordes redondeados */
  width: 220px; /* Ancho fijo */
  backdrop-filter: blur(10px); /* Efecto de desenfoque detrás */
}

/* ====== PASOS ====== */
.steps {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.step {
  background: rgba(255,255,255,0.08);
  padding: 20px;
  border-radius: 10px;
  width: 180px;
}

/* ====== CTA (Llamada a la acción) ====== */
.cta {
  background: linear-gradient(90deg, #10B981, #22C55E); /* Fondo degradado verde */
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  margin: 40px;
}

/* ====== FOOTER ====== */
footer {
  text-align: center; /* Centra el texto */
  padding: 20px;
  opacity: 0.7; /* Ligera transparencia */
  
}