/* =======================================================
   RESET / BASE
======================================================= */
body{
  overflow-x:hidden;  
  font-family:'Arial',sans-serif;
  margin:0;
  padding:0;
  background:#f8f9fa;
  color:#333;
}

/* =======================================================
   HEADER
======================================================= */
header{
  background:#fff;
  padding:10px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  position:sticky;
  top:0;
  z-index:1000;
}
.logo{height:45px}
nav a{
  color:#555;
  margin:0 20px;
  text-decoration:none;
  font-weight:bold;
  transition:color .3s;
}
nav a:hover{color:#ff7f00}

/* =======================================================
   HERO / SLIDER
======================================================= */
.hero-slider{
  position:relative;
  width:100%;
  height:600px;               /* ▲ +120 px para mostrar la parte inferior */
  overflow:hidden;
}
@media(max-width:768px){
  .hero-slider{height:420px;}  /* ▲ altura más contenida en móviles */
}

.slide{
  position:absolute;
  inset:0;
  width:100vw;height:100%;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1s ease-in-out;
}
.slide.active{opacity:1;z-index:1}

/* ▲ Anclamos el banner de la familia (primera diapositiva)
     para que la laptop quede visible */
.slide:first-child{background-position:left bottom;}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}

.hero-content{
  position:absolute;
  left:50px;
  bottom:50px;                /* ▲ texto pegado al borde inferior */
  color:#fff;
  max-width:480px;
  z-index:2;
  text-align:left;
}
.hero-content h1{font-size:46px;font-weight:700;margin:0 0 10px}
.hero-content p{font-size:20px;margin:0 0 20px}

/* =======================================================
   SECCIONES GENERALES
======================================================= */
section{padding:50px 60px;text-align:center}
section h1,section h2{color:#444;margin:0 0 20px}

/* =======================================================
   PLANES / CARDS (sin cambios)
======================================================= */
.planes{background:#fff}
.contenedor-planes{
  display:flex;gap:24px;justify-content:center;flex-wrap:wrap
}
.plan{
  background:#fff;border-radius:8px;padding:40px 30px;
  box-shadow:0 2px 8px rgba(0,0,0,.07);flex:1 1 260px;
  max-width:300px
}
.plan.recomendado{border:2px solid #ff7f00}
.plan h3{margin:0 0 10px}
.velocidad{font-size:34px;font-weight:700;margin:0}
.precio{font-size:24px;margin:8px 0 24px}

/* =======================================================
   BOTONES
======================================================= */
button{
  background:#ff7f00;
  color:#fff;
  border:0;
  padding:10px 24px;
  cursor:pointer;
  border-radius:5px;
  font-size:16px;
  transition:background .3s;
}
button:hover{background:#e76e00}

/* =======================================================
   FOOTER
======================================================= */
footer{
  background:#333;
  color:#fff;
  text-align:center;
  padding:20px;
}
.footer-links a{color:#ff7f00;margin:0 10px;text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* =======================================================
   RESPONSIVE
======================================================= */
@media (max-width:768px){

  /* Ocultamos la lista en móviles */
  header nav{
    position:fixed;              /* cubre pantalla */
    top:0; right:-100%;          /* fuera de vista */
    width:70%; max-width:280px;
    height:100vh;
    background:#fff;
    box-shadow:-2px 0 6px rgba(0,0,0,.15);
    display:flex;
    flex-direction:column;
    gap:24px;
    padding:100px 40px 40px;     /* hueco superior para no tapar logo */
    transition:right .35s ease;
  }

  /* Cuando tenga la clase “open”, se desliza dentro */
  header nav.open{
    right:0;
  }

  /* formatos enlaces dentro del menú móvil */
  header nav a{
    margin:0;
    font-size:20px;
    color:#333;
  }

  /* El ícono hamburguesa solo en móviles */
  .menu-toggle{
    display:block;               /* asegúrate de tener este elemento <div class="menu-toggle">☰</div> */
    font-size:28px;
    cursor:pointer;
  }
}

/* Ocultamos la hamburguesa en escritorio */
@media (min-width:769px){
  .menu-toggle{display:none;}
}