body {
 background-color; #5e1b19:
  background-size: cover;       /* Ajusta la imagen al tamaño de pantalla */
  background-repeat: no-repeat; /* No repite la imagen */
  background-attachment: fixed; /* La imagen se queda fija al hacer scroll */
}

/* === NAVEGACIÓN === */
nav {
  background-color: #000;
  color: #400f0f;
  padding: 10px 0;
  text-align: center;
}

nav a {
  color: #fff;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
  font-family: 'DotGothic16', sans-serif;
  
}

/* === CONTENEDOR CENTRAL === */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 90px;
}

/* === TÍTULOS === */
h1, h2 {
  font-family: "Manufacturing Consent", monospace;
  text-align: center;
  border-bottom: 2px dotted #000;
  padding-bottom: 5px;
  margin-top: 40px;
}

/* === CUADROS DE CONTENIDO === */
.box {
  border: 2px solid #000;
  background-color: #fff;
  padding: 15px;
  margin: 20px 0;
}

/* === TÍTULOS DE SECCIÓN PEQUEÑOS === */
.section-title {
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px dashed #000;
  margin-bottom: 8px;
  text-align: center;
}

/* === IMAGENES CENTRADAS === */
.center-img {
  display: block;
  margin: 10px auto;
  max-width: 100%;
  border: 2px dashed #aaa;
}

/* === CAJA DE IMAGEN SIMULADA === */
.image-box {
  width: 100%;
  height: 200px;
  background-color: #ddd;
  background-image: url('https://via.placeholder.com/400x200?text=Sample+Image');
  background-size: cover;
  background-position: center;
  border: 2px dashed #000;
  margin: 0 auto;
}

/* === BOTONES === */
.button {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #ccc;
  border: 1px solid #000;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  text-align: center;
}

.button:hover {
  background-color: #eee;
  cursor: pointer;
}

/* === CAMPOS DE FORMULARIO === */
input[type="text"],
textarea {
  width: 100%;
  padding: 6px;
  margin-top: 5px;
  border: 1px solid #aaa;
  font-family: inherit;
  font-size: 14px;
}

/* === PIE DE PÁGINA === */
.footer {
  text-align: center;
  margin-top: 50px;
  font-size: 12px;
  color: #666;
}

/* === TEXTOS CENTRADOS === */
.center-text {
  text-align: center;
}

@keyframes flotar {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.flotante {
  animation: flotar 3s ease-in-out infinite;
}

@keyframes girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.giratorio {
  animation: girar 4s linear infinite;
  width: 400px; /* ajusta el tamaño si quieres */
}

.fijo-derecha {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 50; /* para que quede encima de todo */
}

@keyframes girar2 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(900deg); }
}

.giratorio2 {
  animation: girar 10s linear infinite;
  width: 300px; /* ajusta el tamaño si quieres */
}


.fijo-derecha2 {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 50; /* para que quede encima de todo */
}



@keyframes terremoto {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  10%  { transform: translate(-5px, -5px) rotate(-1deg); }
  20%  { transform: translate(5px, -2px) rotate(1deg); }
  30%  { transform: translate(-3px, 4px) rotate(-2deg); }
  40%  { transform: translate(4px, -3px) rotate(2deg); }
  50%  { transform: translate(-4px, 3px) rotate(-1deg); }
  60%  { transform: translate(3px, -2px) rotate(1deg); }
  70%  { transform: translate(-5px, 5px) rotate(-2deg); }
  80%  { transform: translate(5px, -4px) rotate(2deg); }
  90%  { transform: translate(-3px, 2px) rotate(-1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

.temblor-euforico {
  animation: terremoto 0.4s infinite;
}

 margin: 0;
  padding: 0;
}

.banner {
  width: 100%;
  display: flex;
  justify-content: center; /* centra horizontalmente */
  overflow: hidden;         /* previene scroll si el GIF es ancho */
}

.banner img {
  max-width: 100%;
  height: auto;
  display: block;
}

.main-container {
  display: flex;
  justify-content: space-between; /* espacio entre secciones */
  gap: 20px;                       /* separa contenedores */
  padding: 20px;
}

.left-side,
.center,
.right-side {
  flex: 1;                /* todos se expanden igual */
  background-color: #fdf0f5;
  padding: 15px;
  border: 2px solid #ffb6c1;
  border-radius: 8px;
}

/* Si quieres que el contenedor central sea más ancho */
.center {
  flex: 2;
}