html, body {
    background: #ededed url(); 
    margin: 0; 
    padding: 0; 
    height: 100%;
    /* Ahora usará la fuente local que definimos arriba: */
    font-family: "PT Sans Narrow", verdana, sans-serif;
    letter-spacing: 1px;
    text-align: center; 
    font-size: 20px; 
    color: #1a1a1a; 
    font-weight: 700;
  }

.clear{clear:both;}
img{max-width:100%;}
a:link,a:visited{text-decoration:none;color:inherit;transition:all 0.3s ease;cursor:pointer}
a:hover{color:#ffb033;}
.wsp{position:fixed;bottom:10px;right:10px;background:#00be00 url(/assets/img/wp.webp) 14px 14px no-repeat;width:294px;height:50px;overflow:hidden;z-index:6;transition:all 0.3s ease;text-align:right;line-height: 20px;font-weight:700;color:#ededed;padding-right:14px;text-transform:uppercase;border-radius:3px;padding-top:10px;}
.wsp:hover{filter:brightness(70%);}
.hechizo{width:90%;margin:60px auto 12px;max-width:1400px;background:url(/assets/img/bk3.webp);}
.hechizo-footer{width:90%;margin:0px auto 0px;max-width:1400px;background:url(/assets/img/bk3.webp);}
.uniones{width:100%;background:url(/assets/img/bk2.webp) #100b0b;padding:12px 0;}
.uniones img{margin-bottom:-5px;max-width:90%;}
/* .parejas{width:100%;top:0;left:0;position:fixed;padding:10px 0 8px 0;background:#ffc333;color:#000000;} */
/* .espiritual{text-transform: uppercase;font-size:32px;font-weight:700;line-height: 24px;} */
/* Barra fija arriba */

footer, main, header{
  padding: 0px;
  margin: 0px;
}
/* .parejas{
  width:100%;
  position:fixed;
  top:0;
  left:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 15px;
  background:#ffc333;
  color:#000;
  z-index:9999;
  box-sizing:border-box;
} */


.parejas {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #ffc333;
  color: #000;
  z-index: 9999;
  box-sizing: border-box;
  /* Añadir altura fija */
  height: 70px; /* Altura fija para evitar cambios */
  min-height: 70px;
  max-height: 70px;
}

/* Ajustar el margen principal para compensar */
.hechizo {
  width: 90%;
  margin: 70px auto 12px; /* Cambiar de 60px a 70px */
  max-width: 1400px;
  background: url(/assets/img/bk3.webp);
}




/* Texto izquierda */
.espiritual{
  text-transform: uppercase;
  font-size:26px;
  font-weight:700;
  line-height:30px;
  white-space:nowrap;
}

/* WhatsApp derecha */
.right a.whatsapp{
  display:flex;
  align-items:center;
  gap:8px;
  color:#000;
  text-decoration:none;
  font-size:26px;
  font-weight:700;
  white-space:nowrap;
}

.right a.whatsapp img{
  width:38px;
  height:38px;
}

.union{font-size:22px;line-height:20px;}
.brujos{font-size:16px;color:#ffb033;font-style: italic;}
h1{font-size:34px;margin:0 auto;padding:20px 0;color:#ffb033;}
h2{color:#ededed;}
h3,h4{color:#ffb033;}
h4{font-size:18px;}
.vidente{color:#ffb033;}
.hechizo p{margin:16px auto;max-width:90%;color:#FFCC00;}

.brujeria{width:100%;overflow: hidden;height:400px;}








.ribbon {
  text-align: start;
  position: fixed;
  top: 18px; /* 🔥 DESCOMENTA ESTA LÍNEA - baja la cinta para que no tape el header */
  left: -78px;
  z-index: 9999;
  transform: rotate(-45deg);
  padding: 5px 120px 5px 35px; /* 🔥 AUMENTA el padding horizontal (izq/der) */
  font-weight: 600;
  font-size: 10px; /* 🔥 Aumenta ligeramente el tamaño si se ve muy apretado */
    min-width: 300px; /* Un ancho mínimo que cubra tu texto */
  color: #fff;
  background: linear-gradient(135deg, #c70000 0%, #f53b3b 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  white-space: nowrap;
     height: 40px; /* Una altura fija */
  border-radius: 4px;
  /* 🔥 AÑADE esto para que el texto no se corte: */
  min-width: 280px; /* Ancho mínimo garantizado */
  box-sizing: border-box; /* El padding no suma al ancho total */
}





.ribbon .price {
  margin-left: 6px;
  font-weight: 700;
  padding-left: 4px;
  border-left: 1px solid rgba(255,255,255,0.25);
   /* AÑADÍ ESTAS 2 LÍNEAS: */
  display: inline-block;
  min-width: 60px;  /* ← RESERVA ESPACIO para "$ 15.000" */
}


@keyframes hechizos {0% {margin-left: 0;}23% {margin-left: 0;}25% {margin-left: -100%;}48% {margin-left: -100%;}50% {margin-left: -200%;}73% {margin-left: -200%;}75% {margin-left: -300%;}98% {margin-left: -300%;}100% {margin-left: 0;}}
.amor{width:400%;height:400px;display:table; animation:hechizos 12s linear infinite;   /* AÑADÍ ESTO: */
  will-change: transform;
  transform: translateZ(0);  /* Acelera hardware */}

.amarres {
    /* Asegúrate de que ya existe esta regla: */
    width: 25%;
    display: table-cell;
    vertical-align: middle;
    background-size: cover !important;
    /* 🔥 AÑADE ESTO para reservar espacio: */
     height: 400px;  /* MISMA altura que .brujeria */
    background-color: #f0f0f0; /* Un color de fondo de reserva */
}






/* .amarres{width:25%;display:table-cell;vertical-align:middle;background-size:cover !important;} */
.energias{width:fit-content;padding:4px 8px;background:#c80606;color:#ffb033;font-weight: 700;font-size:30px;text-transform:uppercase;margin-left:12px;}
.tarot{width:fit-content;padding:4px 8px;background:#100b0b;color:#ededed;font-weight: 700;font-size:24px;text-transform:uppercase;margin-left:12px;margin-top:10px;}
.deparejas{background:url(/assets/img/trabajos.webp) center;}
.deamantes{background:url(/assets/img/uniones.webp) right center;}
.deamor{background:url(/assets/img/magiablanca.webp) center;}
.poderoso{background:url(/assets/img/amarres.webp) center;}
.magiablanca{background:url(/assets/img/bk2.webp) #100b0b;height:12px;width:100%;}
.aclaracion{font-size:12px; color:#E08A00 !important;}
.firma{font-size:14px;}
.videncia{width:25%;float:left;padding-bottom:14px;}
.videncia img{max-width:90%;}
.dos,.tres{display: none;}

@media only screen and (max-width: 910px) {
.videncia{width:33.33%;}
.ultima,.uno{display: none;}
.dos{display: block;}
}
@media only screen and (max-width: 600px) {
.brujeria,.amor,.amarres{height:320px;}
.energias{font-size:24px;padding:3px 6px;}
.tarot{font-size:22px;padding:3px 6px;}
h1{font-size:28px;}
.videncia{width:50%;}
.tres,.ultima{display: block;}
.dos{display: none;}
 
.espiritual{
  text-transform: uppercase;
  font-size:16px  !important;
  font-weight:700 ;
  line-height:30px;
  white-space:nowrap;  
}

/* WhatsApp derecha */
.right a.whatsapp{

  font-size:15px  !important;

}  


/* Clase para lista centrada */
.lista-centrada {
  list-style: none;
  padding: 0;
  margin: 20px auto;
  max-width: 600px;
  text-align: center;
}

.lista-centrada li {
  margin-bottom: 10px;
  padding-left: 0;
}





}
@media only screen and (max-width: 470px) {
.espiritual{font-size:20px;}
.hechizo{margin-top:112px;}
}
@media only screen and (max-width: 400px) {
.brujeria,.amor,.amarres{height:240px;}
.fuerzas{font-size:20px;}
.energias{font-size:22px;}
.tarot{font-size:20px;}
}
@media only screen and (max-width: 340px) {
.espiritual{font-size:20px;}
.union{font-size:16px}
}


/****************BOTON WHATSAPP*************************/
.floatWapp {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
}

.floatWapp:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.floatWapp svg {
    display: block; /* Esto es clave para que el SVG se vea */
}
  
  .my-floatWapp{
    margin-top:16px;
  }

  /* 🔥 RESPONSIVE REAL PARA CELULARES */
@media (max-width: 768px){
  /* .parejas{
    padding:8px 10px;
  } */

  .espiritual{
    font-size:18px;
    line-height:20px;
    max-width:180px;
    white-space:normal;         /* PERMITE QUE BAJE A 2 LÍNEAS */
  }

  .right a.whatsapp{
    font-size:18px;
  }

  .right a.whatsapp img{
    width:28px;
    height:28px;
  }
}

/* 🔥 RESPONSIVE PARA CELULARES MUY CHICOS (480px) */
@media (max-width: 480px){
  /* .parejas{
    flex-direction:column;       
    gap:6px;
    padding:10px;
    text-align:center;
  } */

  .espiritual{
    font-size:10px;
    line-height:18px;
    max-width:100%;
  }

  .right a.whatsapp{
    font-size:20px;
  }

  .right a.whatsapp img{
    width:24px;
    height:24px;
  }
}