@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.titulo {
  font-family: 'Orbitron', sans-serif;
  
  font-size: 2em;
  color: white;
  background-color: #f3722c; /* tu color azul oscuro */
  text-align: center;
  height: 100%;
}


header{
 
  color: whitesmoke;
  background-color:#f3722c ;
 text-transform: uppercase;
    font-family: "Orbitron", sans-serif;
  font-optical-sizing: 3rem;
  font-style:normal;
  text-align: center;
  border-radius: 5px;

}

.titulodepagina {
  font-family: "Font Awesome 6 Free"; /* obliga a usar solo FA */
  font-weight: 900;
  display: inline-block;
  font-style: normal;
  line-height: 1;
}

.titulodepagina::before {
  content: "\f0e7"; /* Ícono de rayo (Font Awesome) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1em;
  color: inherit;           /* ¡Esto hace que el rayo sea blanco! */
  vertical-align: 0;        /* Corrige alineación con Orbitron */
  display: inline-block;
  width: 0.6em;              /* Tamaño similar a la "i" */
  text-align: center;
  margin-left: 0.1em;
margin-right: 0.25em;
}

.titulos{
 
  font-size: 1.8rem ;
  color: whitesmoke;
  background-color: #f8961e  ;
  text-align: center;
    font-family: "Roboto", sans-serif;
  font-optical-sizing:auto;
  font-style:normal;
  border-radius: 5px;
}


.videoexplicativo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0; /* espacio arriba y abajo */
}

.videoexplicativo video {
  width: 90%;          /* ocupa la mayor parte del ancho del contenedor */
  max-width: 500px;    /* límite máximo para móviles grandes */
  height: auto;        /* mantiene proporción automáticamente */
  max-height: 250px;   /* altura máxima en móviles */
  border-radius: 5px;  /* opcional: bordes redondeados */
}



.cajadepreguntas{
  align-items: center;
  display: flex;
  flex-direction: column;
margin-bottom:5%;

}

.preguntafrecuente{
 border-radius: 5px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.4rem;
  width: 90%;                 /* ancho flexible */
  margin: 0.5% auto;
  border: solid black 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* centra el contenido */
  align-items: flex-start;     /* alinea el texto */
  min-height: 60px;            /* altura mínima en móvil */
  box-sizing: border-box;
  overflow: hidden;            /* evita que el texto sobresalga */
  text-overflow: ellipsis;     /* puntos suspensivos si el texto es muy largo */
  white-space: normal;         /* permite que el texto baje de línea */
}


.botoncontainersection{
  justify-items: center;
}

.botoncontainer{

  text-align: center;
  border-radius:5% ;
 height: 60%;
width: 60%;
border: 5px solid #f9c74f;
font-size:2rem ;

}
.botondecompra{

  text-decoration: none;
  color: black;
  font-family: "Roboto", sans-serif;
  
}


.precio-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1%;               /* más espacio entre elementos */
  margin: 20px auto;
  background: #fff;
  border: 3px solid #f8961e;
  padding: 15px 25px;
  border-radius: 12px;
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* sombra para destacar */
}

/* Precio original tachado */
.precio-original {
  text-decoration: line-through;
  color: #777;
  font-size: 1.6rem;         /* más grande */
  font-family: "Roboto", sans-serif;
}

/* Precio con descuento */
.precio-descuento {
  color: #06d6a0;
  font-size: 2.2rem;         /* más llamativo */
  font-weight: bold;
  font-family: "Roboto", sans-serif;
}

/* Etiqueta de descuento */
.descuento {
  background-color: #d62828;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
}




.footer {
  border-radius: 5px;
  background-color: #f8961e;
  color: white;
  text-align: center;
  padding: 3px ;
  font-size: 0.6rem;
  font-weight: bold;
}

.footerh2{
font-size: 1.4rem ;

}

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1; /* ocupa el espacio restante y empuja el footer */
  }

  .footer {
      
    padding: 15px 0;     /* un poco más de alto */
  }

  .footerh2{
font-size: 1.8rem ;

}

  /* Ajuste para reducir el espacio entre preguntas y footer */
  .cajadepreguntas {
    margin-bottom: 2%; /* más chico que en móvil */
  }

  /* Botón de compra más grande */
  .botoncontainer {
    width: 70%;   /* más ancho en tablet */
    font-size: 2.2rem;
    padding: 12px; /* más altura */
  }

  /* Preguntas frecuentes más grandes */
  .preguntafrecuente {
    font-size: 1.8rem;
    width: 80%;
    min-height: 80px;     /* más alto en pantallas grandes */
    padding: 10px;
  }

   .titulos {
    font-size: 2.2rem;  /* más grande que el 1.8rem que ya tenés */
  }
}