/*
Theme Name: Desarrollador Web Moy
Theme URI: https://desarrolladorwebmoy/wordpress/theme/
Author: Desarrollador Web Moy
Author URI: https://desarrolladorwebmoy.com
Description: Tema hijo de Kadence
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Template: kadence

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share
what you've learned with others.
*/

.particulas-fondo {
  position: relative;
  width: 100%;
  min-height: 100%; /* Ajusta según necesidad */
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.particulas-contenido {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding: 50px 20px;
}

.particulas-contenido h1 {
  color: #FFFFFF;
  font-size: 4rem; /* Ajusta según necesidad */
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 900;
  margin-bottom: 0rem !important; /* Ajusta según necesidad */
}

.particulas-contenido p {
  font-size: 0.7rem; /* Ajusta según necesidad */
  margin-bottom: 1rem !important; /* Ajusta según necesidad */
  font-weight: 600;
  letter-spacing: 0.5rem;
}

.particulas-contenido a {
  display: inline-block;
  padding: 10px 14px; /* Ajusta según necesidad */
  margin: 0 7px; /* Ajusta según necesidad */
  background-color: #BB77FF;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  font-weight: 600;
  font-size: 0.8rem; /* Ajusta según necesidad */
}

.particulas-contenido a:hover {
  background-color: #DF058D;
  color: white;
}


/* Breakpoint para tablet (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .particulas-contenido h1 {
    font-size: 7rem; /* Ajusta según necesidad */
    margin-bottom: 0rem !important; /* Ajusta según necesidad */
  }

  .particulas-contenido p {
    font-size: 1rem; /* Ajusta según necesidad */
    margin-bottom: 7rem !important; /* Ajusta según necesidad */
  }
  .particulas-contenido a {
    font-size: 1rem; /* Ajusta según necesidad */
    padding: 10px 21px; /* Ajusta según necesidad */
    margin: 0 14px; /* Ajusta según necesidad */
  }
}

/* Puntos de rutura para desktop (1025px y superior) */
@media screen and (min-width: 1025px) {
  .particulas-contenido h1 {
    font-size: 10rem; /* Ajusta según necesidad */
    margin-bottom: 0rem !important; /* Ajusta según necesidad */
  }

  .particulas-contenido p {
    font-size: 1.3rem; /* Ajusta según necesidad */
    margin-bottom: 7rem !important; /* Ajusta según necesidad */
  }
  .particulas-contenido a {
    font-size: 1.3rem; /* Ajusta según necesidad */
    padding: 14px 35px; /* Ajusta según necesidad */
    margin: 0 21px; /* Ajusta según necesidad */
  }
}