/* --- Reset y body --- */
body {
  margin:0;
  font-family: Arial,sans-serif;
  background:#000;
  color:#fff;
  scroll-behavior:smooth;
}

/* --- Header --- */
header {
  background:#000;
  text-align:center;
  padding:80px 20px;
}
header h1 {
  font-size:3em;
  margin:0;
}
header p {
  font-size:1.2em;
  color:#ccc;
}

/* --- Navbar / Menú hamburguesa --- */
.navbar {
  background:#111;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  position:sticky;
  top:0;
  z-index:1000;
}
.navbar .logo {
  color:#ff9800;
  font-weight:bold;
  font-size:1.2em;
}
.navbar .menu-toggle {
  background:none;
  border:none;
  color:#fff;
  font-size:1.5em;
  cursor:pointer;
}
.navbar .menu {
  list-style:none;
  display:flex;
  gap:15px;
}
.navbar .menu li a {
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  transition:0.3s;
}
.navbar .menu li a:hover {
  color:#ff9800;
}

/* Mostrar menú cuando está abierto en móvil */
body.menu-open .menu {
  display:flex !important;
}

/* --- Secciones --- */
section {
  padding:60px 20px;
  max-width:1000px;
  margin:0 auto;
}
h2 {
  color:#ff9800;
  margin-bottom:20px;
}

/* --- Botones --- */
.button {
  display:inline-block;
  margin:10px 5px;
  padding:15px 25px;
  background:#ff9800;
  color:white;
  text-decoration:none;
  border-radius:5px;
  font-weight:bold;
  cursor:pointer;
}

/* --- Cards --- */
.card {
  background:#111;
  padding:20px;
  margin:15px 0;
  border-radius:10px;
}

/* --- Animación scroll reveal para tarjetas --- */
.cards .card {
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.6s, opacity 0.6s;
}
.cards .card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Footer --- */
footer {
  background:#111;
  text-align:center;
  padding:20px;
  margin-top:40px;
  font-size:0.9em;
}

/* --- Redes Sociales --- */
.redes-sociales {
  text-align:center;
  padding:40px 20px;
  background:#1e1e1e;
}
.redes-sociales .icons {
  display:flex;
  justify-content:center;
  gap:30px;
  margin-top:20px;
}
.redes-sociales .icons img {
  width:50px;
  height:50px;
  transition:0.3s;
}
.redes-sociales .icons img:hover {
  transform:scale(1.1);
}

/* --- Contact icons --- */
.contact-icons a {
  margin:0 10px;
  font-size:1.5em;
  color:#fff;
  text-decoration:none;
}

/* --- Submenu --- */
.submenu {
  display:none;
  margin-top:20px;
}
.show {
  display:block;
}

/* --- Media queries para móvil --- */
@media(max-width:768px){
  .navbar .menu {
    display:none;
    flex-direction:column;
    background:#111;
    position:absolute;
    top:50px;
    right:0;
    width:200px;
    padding:10px;
    border-radius:5px;
  }
  body.menu-open .menu {
    display:flex;
  }
  .redes-sociales .icons {
    gap:20px;
  }
}

/* --- Botón flotante de WhatsApp --- */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 1000;
    cursor: pointer;
}
.whatsapp-float img {
    width: 100%;
    height: 100%;
}

/* Overlay full-screen */
.overlay {
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.95);
  overflow-y: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay-content a {
  padding: 15px;
  text-decoration: none;
  font-size: 2em;
  color: #ff9800;
  display: block;
  transition: 0.3s;
}
.overlay-content a:hover {
  color: #fff;
}
.closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 3em;
  color: #fff;
  text-decoration: none;
}

/* --- Animación de pulso para botones --- */
.pulse {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,152,0, 0.6); }
  70% { box-shadow: 0 0 0 15px rgba(255,152,0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255,152,0, 0); }
}

/* --- Paquetes en lista estilo tarjeta --- */
.paquetes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.paquetes-list .card {
  flex: 1 1 250px;
  padding: 15px;
  background: #111;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s, background 0.2s;
}

.paquetes-list .card input[type="radio"] {
  transform: scale(1.2);
  cursor: pointer;
}

.paquetes-list .card:hover {
  transform: translateY(-3px);
  background: #222;
}

/* --- Estilos extra para radios en tarjetas --- */
.paquetes-list input[type="radio"] {
  display: none;
}
.paquetes-list .card {
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.3s;
}
.paquetes-list input[type="radio"]:checked + * {
  color: #ff9800;
  font-weight: bold;
}
.paquetes-list .card:has(input[type="radio"]:checked) {
  border: 2px solid #ff9800;
  background: #1a1a1a;
}

/* --- Animación scroll reveal para paquetes --- */
.paquetes-list .card {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.6s, opacity 0.6s;
}
.paquetes-list .card.visible {
  opacity: 1;
  transform: translateY(0);
}