/* ----------------------------------------------
  HEADER - SLIDE-IN MENU RESPONSIVE
---------------------------------------------- */

/* Toggle: desktop oculto */
.nav-toggle 
{
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  color: #0078d7;
  z-index: 1001; /* siempre encima del nav */
}

/* Overlay (invisible por defecto) */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.fijo
{
  position: fixed;
  right: 20px;
  top: 15px;
}

/* ------------------------------
  MOBILE RESPONSIVE
------------------------------ */
@media (max-width: 900px) 
{

  /* Mostrar toggle */
  .nav-toggle 
  {
    display: block;
  }

  .main-header
  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-inner
  {
    width:400px;
    margin: 0px;
  }

  .container
  {
    padding: 0px 20px;
  }

  /* Nav lateral */
  .main-header .nav 
  {
    display: flex;
    position: fixed;
    top: 0;
    right: -280px; /* fuera de pantalla por defecto */
    width: 280px;
    height: 100%;
    flex-direction: column;
    background: #fff;
    padding: 2rem 1.5rem;
    box-shadow: -4px 0 12px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    z-index: 1001;
  }

  .main-header .nav a 
  {
    padding: 1rem 0;
    font-size: 0.80rem;
  }

  .main-header .nav a.btn-ghost 
  {
    margin: 1rem 0 0 0;
    text-align: center;
  }

  /* Activar menú */
  .main-header .nav.active 
  {
    right: 0;
  }

  /* Overlay activo */
  .nav-overlay.active 
  {
    opacity: 1;
    visibility: visible;
  }
}

@media(max-width: 500px)
{
  .cta-buttons
  {
    flex-direction: column;
  }

  #formulario-envio
  {
    display: flex;
    flex-direction: column;
  }
}

@media(max-width: 1190px)
{
  .features
  {
    width: 100%;
  }
}

@media(max-width: 1035px)
{
  .features-list
  {
    min-width: 500px;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .features-lists
  {
    gap: 0px;
  }
}

@media(max-width: 520px)
{
  .features-list
  {
    min-width: 95%;
  }
}

/* ----------------------------------------------
  FOOTER RESPONSIVE
---------------------------------------------- */
.footer-cols {
  display: flex;
  gap: 2rem;
}

.footer-about, .footer-contact, .footer-links {
  flex: 1 1 250px;
}

@media (max-width: 768px) {
  .footer-cols {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-about, .footer-contact, .footer-links {
    flex: 1 1 100%;
  }

  .footer-links p, .footer-links a {
    display: block;
  }
}

@media (max-width: 600px) 
{
  .flex-wrap
  {
    flex-direction: column;
  }

  .contact-section
  {
    padding: 10px;
  }

  .hero.container
  {
    padding: 40px 10px;
  }
}

@media(max-width:395px)
{
  #form-demo
  {
    width: 100%;
  }

  .hero-content
  {
    width: 100%;
  }

  .hero-text
  {
    width: 100%;
    min-width: 100%;
  }
}