/* Estilos YeyoBitz - Basado en la guía de estilo */

/* Importación de fuente Press Start 2P de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Variables de colores - Paleta Blogfiction (Vibrante) */
:root {
  /* Colores principales - Azul del logo (más vibrante) */
  --primary-color: #0066FF;       /* Azul brillante y vibrante */
  --primary-dark: #0052FF;         /* Azul oscuro vibrante */
  --primary-light: #3399FF;       /* Azul claro vibrante */
  
  /* Colores de acento - Gradiente del texto (más vibrante) */
  --accent-color: #FF4444;        /* Naranja/Rosa vibrante */
  --accent-secondary: #FF1744;      /* Magenta/Púrpura vibrante */
  --accent-tertiary: #FFC107;     /* Amarillo dorado vibrante */
  
  /* Grises */
  --dark-gray: #151521;           /* Casi negro con tinte púrpura */
  --medium-gray: #2C2C3A;         /* Gris oscuro */
  --light-gray: #E0E0E0;          /* Gris claro */

  /* Colores de interfaz */
  --background-main: #FFFFFF;     /* Fondo principal blanco */
  --background-dark: var(--dark-gray);  /* Fondo oscuro */
  --text-dark: #121212;           /* Texto oscuro */
  --text-light: #FFFFFF;          /* Texto claro */
  --text-muted: #424242;          /* Texto secundario */
  
  /* Colores de estado */
  --success: #00E676;             /* Verde vibrante */
  --warning: #FFC107;             /* Amarillo dorado vibrante de la marca */
  --error: #FF4444;               /* Rojo/Naranja vibrante del gradiente */
  --info: #0066FF;                /* Azul vibrante del logo */
  
  /* Colores para tags */
  --tag-juego: var(--primary-color);      /* Azul del logo */
  --tag-web: var(--accent-secondary);      /* Magenta del gradiente */
  --tag-design: var(--accent-tertiary);   /* Amarillo dorado */
  --tag-tienda: var(--accent-color);       /* Naranja/Rosa del gradiente */

  /* Colores Secundarios */
  --fondo-secundario: #FFFFFF; /* White */
  --fondo-tarjetas-pasadas: #F5F5F5; /* Gris muy claro */
  --borde-principal: #0066FF; /* Azul vibrante del logo */
  --borde-secundario: #9CA3AF; /* Gray 400 */

  /* Colores de Estado */
  --exito: #00E676; /* Verde vibrante */
  --advertencia: #FFC107; /* Amarillo dorado vibrante de la marca */
  --informacion: #0066FF; /* Azul vibrante del logo */

  /* Colores de Etiquetas */
  --juego-fondo: #E3F2FD; /* Azul claro basado en el logo */
  --juego-borde: #0066FF; /* Azul vibrante del logo */
  --juego-texto: #0052FF; /* Azul oscuro vibrante */
  --tienda-fondo: #FFE0E0; /* Naranja claro vibrante del gradiente */
  --tienda-borde: #FF4444; /* Naranja/Rosa vibrante del gradiente */
  --tienda-texto: #FF1744; /* Magenta vibrante del gradiente */

  /* Variables adicionales usadas en el código */
  --acento-primario: #0066FF;      /* Azul vibrante del logo - Color principal */
  --acento-secundario: #FFC107;    /* Amarillo dorado vibrante de las letras BF */
  --fondo-principal: #FFFFFF;      /* Fondo blanco principal */
  --texto-principal: #121212;      /* Texto oscuro principal */
  --titulo-principal: #0066FF;     /* Títulos en azul vibrante del logo */
  --titulo-secundario: #FF1744;    /* Títulos secundarios en magenta vibrante */
}

/* Estilos básicos */
body {
  background-color: var(--fondo-principal);
  color: var(--texto-principal);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .w3-button, .titulo-pixel {
  font-family: 'Press Start 2P', cursive;
  color: var(--text-dark);
}

/* Jerarquía de textos */
h1 {
  font-size: 24px;
  line-height: 32px;
}

h2 {
  font-size: 20px;
  line-height: 28px;
}

h3 {
  font-size: 18px;
  line-height: 24px;
}

h4, h5, h6 {
  font-size: 16px;
  line-height: 22px;
}

/* Estilos de barra de navegación */
.w3-top {
  position: fixed;
  width: 100%;
  z-index: 999;
}

.w3-bar.w3-theme-d2 {
  background-color: var(--acento-primario) !important;
  color: white !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

.w3-bar-item.w3-button {
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  padding: 16px 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.w3-bar-item.w3-button:hover {
  background-color: var(--acento-secundario) !important;
  transform: translate(2px, 2px);
}

.w3-teal {
  background-color: var(--acento-primario) !important;
  color: white !important;
}

/* Botones estilo YeyoBitz */
.w3-button {
  border: 4px solid var(--acento-primario);
  background-color: var(--acento-primario);
  color: white;
  padding: 12px 24px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  text-transform: uppercase;
  font-size: 14px;
  margin: 8px 4px;
}

.w3-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.w3-button:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* Tarjetas estilo YeyoBitz */
.w3-card {
  border: 4px solid var(--borde-principal);
  background-color: var(--fondo-secundario);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 16px;
}

.w3-card:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

/* Modales estilo YeyoBitz */
.w3-modal-content {
  border: 4px solid var(--borde-principal);
  background-color: var(--fondo-secundario);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
  max-width: 600px;
}

.w3-modal-content header {
  background-color: var(--acento-primario);
  color: white;
  font-family: 'Press Start 2P', cursive;
  padding: 16px;
}

/* Modal estilo videojuego */
.modal-videojuego {
  border: 6px solid var(--borde-principal);
  background-color: var(--fondo-principal);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.4);
  max-width: 600px;
  padding: 30px;
  position: relative;
  transform: translateY(0);
  animation: modal-pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 999;
}

@keyframes modal-pop-in {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-videojuego .modal-titulo {
  font-family: 'Press Start 2P', cursive;
  text-align: center;
  font-size: 24px;
  color: var(--acento-primario);
  margin-bottom: 20px;
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
}

.modal-videojuego .modal-cargo {
  font-family: 'Press Start 2P', cursive;
  display: block;
  background-color: #0066FF;
  color: white;
  padding: 8px 15px;
  font-size: 14px;
  margin: 15px auto;
  max-width: 80%;
  text-align: center;
}

.modal-videojuego .modal-imagen {
  margin: 0 auto 20px;
  display: block;
  border: 5px solid var(--borde-principal);
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
  width: 150px;
  height: 150px;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.modal-videojuego .modal-descripcion {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: center;
}

.modal-videojuego .modal-contacto {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 15px;
}

.modal-videojuego .modal-contacto p {
  margin: 5px 10px;
  font-size: 14px;
}

.modal-cerrar-movil {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  font-family: 'Press Start 2P', cursive;
  color: white;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  padding: 5px 8px;
  background-color: #ff3333;
  border: 3px solid var(--borde-principal);
  animation-duration: 2s;
  animation-iteration-count: infinite;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.modal-cerrar-movil:hover {
  background-color: #ff0000;
  animation-name: pulse-button;
}

@keyframes pulse-button {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .modal-cerrar-movil {
    display: block;
    animation-name: pulse-button;
  }
  
  .modal-videojuego {
    max-width: 85%;
    padding: 25px 20px 20px;
  }
  
  .modal-videojuego .modal-titulo {
    font-size: 18px;
    margin-top: 10px;
  }
  
  .modal-videojuego .modal-cargo {
    font-size: 12px;
  }
  
  .modal-videojuego .modal-descripcion {
    font-size: 14px;
  }
  
  .modal-videojuego .modal-contacto p {
    font-size: 12px;
  }
}

/* Círculos para imágenes */
.w3-circle {
  border: 4px solid var(--borde-principal);
}

/* Efectos retro */
.pixel-corners {
  position: relative;
  clip-path: polygon(
    0px 4px,
    4px 0px,
    calc(100% - 4px) 0px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    0px calc(100% - 4px)
  );
}

.scanlines {
  position: relative;
  overflow: hidden;
}

.scanlines::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.05) 51%
  );
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.15;
}

/* Sombras estilo pixel art */
.pixel-shadow {
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.pixel-shadow:hover {
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
}

/* Estilo de tags para categorías */
.w3-tag.pixel-corners {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-juego {
  background-color: var(--tag-juego);
  color: white;
}

.tag-web {
  background-color: var(--tag-web);
  color: var(--text-dark);
}

.tag-design {
  background-color: var(--tag-design);
  color: var(--text-dark);
}

.tag-tienda {
  background-color: var(--tag-tienda);
  color: white;
}

/* Estilos para secciones */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.subheader-line {
  height: 4px;
  width: 80px;
  background-color: var(--accent-color);
  margin: 0 auto;
}

/* Transiciones para elementos interactivos */
.smooth-transition {
  transition: all 0.3s ease-in-out;
}

/* Botones personalizados */
.btn-pixel {
  font-family: 'Press Start 2P', cursive, sans-serif;
  font-size: 0.9rem;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: var(--text-light);
  border: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-pixel:hover {
  background-color: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}

.btn-pixel:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

/* Importación de fuentes */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  font-display: swap;
}

/* Secciones principales */
.seccion-principal {
  background-color: var(--fondo-principal);
  padding: 64px 32px;
}

.seccion-secundaria {
  background-color: var(--fondo-secundario);
  padding: 64px 32px;
}

/* Estilos personalizados para el tema */
.w3-theme {
  color: var(--text-light) !important;
  background-color: var(--primary-color) !important;
}

.w3-theme-d1 {
  color: var(--text-light) !important;
  background-color: var(--primary-dark) !important;
}

.w3-theme-d2 {
  color: white !important;
  background-color: var(--acento-secundario) !important;
}

.w3-theme-l1 {
  color: var(--text-dark) !important;
  background-color: var(--primary-light) !important;
}

.w3-theme-l2 {
  color: var(--texto-principal) !important;
  background-color: var(--fondo-secundario) !important;
}

.w3-theme-l5 {
  color: var(--texto-principal) !important;
  background-color: var(--fondo-tarjetas-pasadas) !important;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos específicos para la sección de contacto */
#contact .w3-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 15px;
  height: 100%;
}

#contact .w3-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#contact .w3-container h3 {
  font-family: 'Press Start 2P', cursive;
  font-size: 18px;
  margin-top: 15px;
  color: var(--titulo-principal);
}

#contact .w3-container h4 {
  font-size: 16px;
  margin-top: 5px;
  color: var(--titulo-secundario);
}

#contact .w3-text-teal {
  color: var(--acento-principal) !important;
}

@media (max-width: 768px) {
  #contact .w3-col.m6 {
    width: 100%;
  }
  
  #contact .w3-col.m5,
  #contact .w3-col.m7 {
    width: 100%;
  }
}

/* Botones en la sección de servicios */
.w3-ul.w3-border.w3-hover-shadow {
  border: 4px solid var(--borde-principal);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.w3-ul.w3-border.w3-hover-shadow:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.w3-ul.w3-border.w3-hover-shadow li.w3-theme,
.w3-ul.w3-border.w3-hover-shadow li.w3-theme-l2 {
  font-family: 'Press Start 2P', cursive;
  padding: 16px;
}

/* Menú desplegable de redes sociales */
.w3-dropdown-content {
  background-color: transparent !important;
  border: 4px solid var(--borde-principal);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.w3-dropdown-content .w3-bar-item.w3-button {
  font-size: 10px;
  padding: 10px 15px;
  margin: 2px 0;
  background-color: white;
  color: var(--texto-principal) !important;
  border: 2px solid var(--borde-principal);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.w3-dropdown-content .w3-bar-item.w3-button:hover {
  background-color: var(--fondo-principal) !important;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}

.w3-dropdown-hover .w3-button {
  padding: 14px 16px;
  font-size: 11px;
}

/* Efectos adicionales */
@media (max-width: 600px) {
  .w3-button {
    width: 100%;
    margin: 8px 0;
  }
  
  h1 {
    font-size: 20px;
    line-height: 28px;
  }
  
  h2 {
    font-size: 18px;
    line-height: 24px;
  }
}

/* Footer */
footer {
  border-top: 4px solid var(--borde-principal);
}

footer .w3-button {
  padding: 8px;
  font-size: 16px;
}

/* Botón flotante */
.w3-circle.w3-button {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  padding: 0;
}

/* Estilos para el organigrama (versión limpia y unificada) */
.organigrama {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 30px;
  padding: 0 15px;
}

.organigrama-nivel {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 8px 0;
  position: relative;
  z-index: 1;
}

.organigrama-caja {
  background-color: var(--fondo-secundario);
  border: 4px solid var(--borde-principal);
  padding: 15px;
  margin: 0 10px 2px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  max-width: 300px;
  position: relative;
  overflow: hidden;
}

.organigrama-caja:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
  background-color: var(--fondo-principal);
  z-index: 5;
}

.organigrama-caja:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 65%, rgba(255,255,255,0.3) 70%, transparent 75%);
  background-size: 200% 200%;
  animation: shine 1s forwards;
}

.organigrama-caja h3 {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
}

.organigrama-caja p {
  margin: 5px 0 0;
  font-size: 12px;
  opacity: 0.9;
}

/* Líneas del organigrama */
.organigrama-linea-vertical {
  width: 6px;
  height: 15px;
  background-color: var(--borde-principal);
  margin: 0 auto;
  position: relative;
  z-index: 0;
}

.organigrama-linea-horizontal {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  max-width: calc(100% - 20px);
  overflow: visible;
}

.organigrama-linea-horizontal:before {
  content: '';
  height: 6px;
  background-color: var(--borde-principal);
  width: 100%;
  max-width: calc(100% - 20px);
  margin: 0 auto;
}

/* Clases específicas para líneas horizontales */
.organigrama-linea-principal {
  width: 60%;
  max-width: 300px;
}

.organigrama-linea-secundaria {
  width: 85%;
  max-width: 250px;
}

.organigrama-nivel > .organigrama-linea-horizontal {
  width: 50%;
  max-width: 300px;
}

.organigrama-division > .organigrama-linea-horizontal {
  width: 65%;
  max-width: 80%;
}

.organigrama-seccion .organigrama-linea-horizontal {
  width: 50%;
  max-width: 180px;
}

.organigrama-subseccion .organigrama-linea-horizontal {
  width: 40%;
  max-width: 120px;
}

/* Ajustes específicos */
.organigrama-caja + .organigrama-linea-vertical {
  margin-top: 2px;
}

.organigrama-nivel + .organigrama-linea-vertical {
  margin-top: 0;
  margin-bottom: 0;
}

.organigrama-linea-vertical + .organigrama-linea-horizontal {
  margin-top: 0;
  margin-bottom: 0;
}

.organigrama-division {
  display: flex;
  justify-content: space-around;
  width: 100%;
  position: relative;
  margin-top: 0;
}

.organigrama-nivel-principal {
  margin-bottom: 5px;
}

/* Componentes del organigrama */
.organigrama-seccion {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48%;
  position: relative;
}

.organigrama-subseccion {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Estilos específicos para los diferentes tipos de cajas */
.organigrama-caja.direccion {
  background-color: #0066FF;
  color: white;
  min-width: 250px;
  padding: 20px;
  position: relative;
  border-width: 5px;
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.25);
}

.organigrama-caja.direccion::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(90deg, #FFC107, #FF4444, #FFC107);
  z-index: 2;
}

.organigrama-caja.desarrollo,
.organigrama-caja.finanzas {
  background-color: #3399FF;
  color: white;
  min-width: 220px;
  border-width: 4px;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.22);
}

.organigrama-caja.departamento {
  background-color: var(--acento-secundario);
  color: white;
  min-width: 180px;
  border-width: 3px;
  cursor: default;
  opacity: 0.9;
}

.organigrama-caja.departamento:hover {
  transform: none;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  background-color: var(--acento-secundario);
}

.organigrama-caja.departamento:hover::after {
  display: none;
}

.organigrama-caja.sub-departamento {
  background-color: #FFC107;
  color: var(--texto-principal);
  border-width: 3px;
  min-width: 180px;
}

/* Responsividad */
@media (max-width: 992px) {
  .organigrama-caja {
    min-width: unset !important;
    padding: 12px;
    margin: 0 5px;
  }
  
  .organigrama-caja h3 {
    font-size: 12px;
  }
  
  .organigrama-caja p {
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  .organigrama-division {
    flex-direction: column;
    align-items: center;
  }
  
  .organigrama-seccion {
    width: 90%;
    margin-bottom: 20px;
  }
  
  .organigrama-seccion:first-child {
    margin-bottom: 30px;
  }
  
  .organigrama-nivel {
    flex-direction: column;
    align-items: center;
    margin: 5px 0;
  }
  
  .organigrama-caja {
    margin: 8px 0;
    width: 100%;
    max-width: 250px;
  }
  
  .organigrama-subseccion {
    margin-bottom: 20px;
  }
  
  .organigrama-linea-horizontal:before {
    width: 60%;
    max-width: 120px;
  }
  
  .organigrama-linea-principal {
    width: 40%;
    max-width: 150px;
  }
  
  .organigrama-linea-vertical {
    height: 15px;
  }
}

@media (max-width: 576px) {
  .organigrama {
    padding: 0;
  }
  
  .organigrama-caja {
    max-width: 200px;
    padding: 10px;
  }
  
  .organigrama-caja h3 {
    font-size: 11px;
  }
  
  .organigrama-caja p {
    font-size: 9px;
  }
}

/* Estilos para el modal */
.w3-modal {
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.6);
}

/* Cuando el modal está abierto, esconder todos los elementos con hover */
.modal-active .organigrama-caja:hover {
  transform: none !important;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2) !important;
  background-color: inherit !important;
  z-index: 1 !important;
}

.modal-active .organigrama-caja:hover::after {
  display: none !important;
}

.modal-active .organigrama {
  pointer-events: none;
}

/* Estilos para el footer según YeyoBitz Style */
.yeyobitz-footer {
  background-color: var(--acento-primario);
  color: white;
  border-top: 4px solid var(--acento-primario);
  padding: 32px;
  margin-top: 64px;
}

.footer-contenido {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.footer-columna {
  flex: 1;
  min-width: 250px;
}

.footer-titulo {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--fondo-principal);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  font-size: 14px;
  transition: all 0.2s;
}

.footer-links a:hover {
  color: var(--fondo-principal);
  transform: translateX(5px);
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--fondo-principal);
  transition: width 0.3s;
}

.footer-links a:hover::after {
  width: 100%;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: white;
  color: var(--acento-primario);
  border: 3px solid var(--acento-primario);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
  font-size: 20px;
}

.social-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  background-color: var(--fondo-principal);
}

.firma-container {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 2px solid var(--acento-secundario);
  text-align: center;
  font-family: 'Press Start 2P', cursive;
}

.firma-container p {
  font-size: 14px;
  margin-bottom: 8px;
}

.firma-link {
  color: var(--fondo-principal);
  text-decoration: none;
  position: relative;
  transition: all 0.2s;
}

.firma-link:hover {
  color: white;
}

.yeyobitz-firma {
  font-size: 16px;
  position: relative;
}

.yeyobitz-firma::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--fondo-principal);
  transition: width 0.3s;
}

.yeyobitz-firma:hover::after {
  width: 100%;
}

.copyright {
  font-size: 12px;
  opacity: 0.8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  margin-top: 8px;
}

.volver-arriba-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.boton-volver-arriba {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--fondo-principal);
  color: var(--acento-primario);
  border: 3px solid var(--acento-primario);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
  font-size: 18px;
}

.boton-volver-arriba:hover {
  transform: translateY(-5px);
  box-shadow: 4px 9px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .yeyobitz-footer {
    padding: 24px 16px;
  }
  
  .footer-columna {
    min-width: 100%;
    margin-bottom: 30px;
  }
  
  .footer-contenido {
    flex-direction: column;
    gap: 20px;
  }
  
  .footer-titulo {
    font-size: 16px;
    margin-bottom: 15px;
  }
  
  .firma-container {
    margin-top: 20px;
  }
  
  .firma-container p {
    font-size: 12px;
  }
  
  .yeyobitz-firma {
    font-size: 14px;
  }
}