body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #E5C27F;
  color: #333;
  
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.titulo {
  text-align: center;
  margin-bottom: 20px;
  color: black;
}

.main-img {
  display: block;
  margin: 0 auto 40px auto;
  width: 200px;
  border-radius: 10px;
}

.bloque {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  gap: 20px;
  background-color: #ceae72;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  cursor: pointer;


}

.bloque:nth-child(even) {
  flex-direction: row-reverse;
}

.bloque img {
  width: 200px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.bloque p {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 600px;
}

.final {
  text-align: center;
  margin-top: 50px;
}

.boton {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ceae72;
  color: white;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 10px;
}
.celeste {
  color: #00bcd4; 
  font-weight: bold;
}
.bloque:hover {
   transform: scale(1.02);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  text-align: center;
}

.modal-contenido {
  max-width: 80%;
  height: auto;
  border-radius: 10px;
}

.cerrar {
  position: absolute;
  top: 30px;
  right: 50px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
#modal-bloque {
 display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px); /* 🎯 el efecto de blur */
  -webkit-backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  padding: 20px;

}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 80px,
    transparent 80px,
    transparent 100px
  );
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  font-size: 70px;
  color: rgba(220, 20, 60, 0.06); /* carmesí suave con transparencia */
  font-weight: bold;
  line-height: 100px;
  white-space: pre;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  animation: moveLove 60s linear infinite;
  background: none;
}

body::before {
  content: "LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE LOVE ";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  font-size: 70px;
  font-weight: bold;
  color: rgba(220, 20, 60, 0.1); /* carmesí suave */
  line-height: 100px;
  white-space: pre-wrap;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: moveLove 60s linear infinite;
  pointer-events: none;
}
#modal-bloque .contenido-clon {
  background: transparent;
  border-radius: 12px;
  max-width: 90%;
  padding: 30px;
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#modal-bloque .cerrar {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 35px;
  color: white;
  cursor: pointer;
}
#modal-bloque .contenido-clon {
  background-color: #e5c27f;
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 90%;
  animation: zoomIn 0.3s ease;
}

.contenido-clon img {
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.contenido-clon p {
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  max-width: 600px;
  flex: 1;
}
.amor{
font-weight: bold;
}
.amarte{
font-weight: bold;
}
.amo{
  font-weight: bold;
  color: crimson;
}
.amor de mi vida{
   font-weight: bold;
  color: crimson;
}