.tururu {
width: 130vw;
display: flex;
flex-direction: column;
align-items: center;
}
.seo-rating-meta {
color: white;
}
.lista-horoscopos-archivo {
letter-spacing: 0.4px;
font-weight: bold;
text-decoration: underline;
margin: 0 auto !important;
list-style-type: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px 0px;
text-align: center;
padding-bottom: 20px;
}
.lista-horoscopos-archivo li a {
display: inline-block;
color: #ffffff;
text-decoration: none;
font-size: 1.1rem;
text-shadow:
0 0 6px rgba(255, 220, 150, 0.8),
0 0 15px rgba(255, 255, 255, 0.4);
transition: all 1.1s ease;
transform: scale(1);
padding: 12px 15px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
}
.lista-horoscopos-archivo li a:hover {
color: #cccccc;
text-shadow:
0 0 3px rgba(255, 220, 150, 0.4),
0 0 8px rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
@media (max-width: 768px) {
.lista-horoscopos-archivo {
grid-template-columns: 1fr !important;
width: 100vw;
margin-left: -40px !important;
}
.lista-horoscopos-archivo li a {
font-size: 1rem;
}
.tururu {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
}
.ajustes h2 {
font-size: 1.65rem !important;
font-weight: 700;
line-height: 1.3;
text-align: center;
letter-spacing: 1px;
padding: 20px 0;
margin-top: -0px !important;
border: none;
box-shadow: none;
}
}
.ajustes h2 {
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
color: white !important;
font-size: 2.45rem;
font-weight: 700;
line-height: 1.8;
text-align: center;
letter-spacing: 1px;
padding: 20px 0;
margin-top: -0px !important;
border: none;
box-shadow: none;
background: linear-gradient(90deg, #ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
opacity: 0;
filter: blur(3px);
animation: appearMystic 2.5s ease-out forwards;
}
.ajustes h3 {
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
color: white !important;
font-size: 2.65rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
letter-spacing: 1px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 20px;
padding-top: 20px;
border: none;
box-shadow: none;
text-align: left;
background: linear-gradient(90deg, #ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
opacity: 0;
filter: blur(3px);
animation: appearMystic 2.5s ease-out forwards;
}
.widget-astrolabio {
--color-fondo: #2a2233;
--color-acento: #c5a788;
--color-texto-claro: #ffffff;
--color-sombra: rgba(197, 167, 136, 0.5);
}
.widget-astrolabio .oracle-wrapper {
position: relative;
left: -36px;
width: 400px;
height: 400px;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.hero-section .widget-astrolabio .oracle-body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 65%;
height: 65%;
border-radius: 50%;
box-sizing: border-box;
background: transparent;
border: none;
box-shadow: none;
margin-top: 0px;
padding: 0;
}
.hero-section .widget-astrolabio .form-title {
margin-bottom: 10px !important;
font-size: 1.1em;
color: #000000;
padding-left: 0px;
padding-top: 0px;
padding-top: 37px;
line-height: 3.3;
letter-spacing: 0.5px;
}
.widget-astrolabio .oracle-body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 65%;
height: 65%;
border-radius: 50%;
box-sizing: border-box;
background: transparent;
border: none;
box-shadow: none;
margin-top: 60px;
padding: 0;
}
.widget-astrolabio .content-core {
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.widget-astrolabio .content-background {
width: 100%;
height: 100%;
background-color: var(--color-texto-claro);
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
border: 0.6px solid var(--color-acento);
padding: 5px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}
.widget-astrolabio .subscription-form {
text-align: center;
width: 100%;
padding: 8px 0;
margin-bottom: 20px;
}
.widget-astrolabio .form-title {
font-size: 1.1em;
color: #000000;
padding-top: 0;
margin-bottom: 10px;
line-height: 3.3;
letter-spacing: 0.5px;
}
.widget-astrolabio .subscription-form input[type="email"] {
background-color: transparent;
border: none;
border-bottom: 0.1px solid var(--color-acento);
border-radius: 0;
width: 95%;
font-size: 1.1em;
color: #000000;
text-align: center;
margin-bottom: 15px;
}
.widget-astrolabio .subscription-form input[type="email"]::placeholder {
color: var(--color-acento);
opacity: 1;
}
.widget-astrolabio .subscription-form input[type="email"]:focus {
outline: none;
}
.widget-astrolabio .subscription-form button[type="submit"] {
background-image: linear-gradient(145deg, #948061, #201c18 60%);
color: #ffffff;
border: 0.6px solid #000000;
border-radius: 50px;
padding: 12px 30px;
font-size: 0.8em;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
}
.widget-astrolabio .subscription-form button[type="submit"]:hover {
background-color: #ffffff;
background-image: none;
color: #000000;
}
.widget-astrolabio .orbital-track {
position: absolute;
width: 100%;
height: 100%;
border: 2px dashed var(--color-acento);
border-radius: 50%;
opacity: 0.15;
}
.widget-astrolabio .middle-track,
.widget-astrolabio .middle2-track,
.widget-astrolabio .middle3-track {
position: absolute;
z-index: 5;
border: 0.1px solid var(--color-acento);
border-radius: 50%;
opacity: 0.9;
}
.widget-astrolabio .middle-track {
width: 84%;
height: 84%;
}
.widget-astrolabio .middle2-track {
width: 84%;
height: 9%;
z-index: 0;
}
.widget-astrolabio .static-glyph {
position: absolute;
color: var(--color-acento);
opacity: 0.3;
font-size: 14px;
}
.widget-astrolabio .glyph-1 {
top: 2%;
left: 50%;
transform: translateX(-50%);
}
.widget-astrolabio .glyph-2 {
bottom: 2%;
left: 50%;
transform: translateX(-50%);
}
.widget-astrolabio .glyph-3 {
left: 2%;
top: 50%;
transform: translateY(-50%);
}
.widget-astrolabio .glyph-4 {
right: 2%;
top: 50%;
transform: translateY(-50%);
}
.widget-astrolabio .hand-wrapper {
position: absolute;
width: 100%;
height: 100%;
animation: rotate 360s linear infinite;
}
.widget-astrolabio .closer-orbit {
width: 70%;
height: 70%;
}
.widget-astrolabio .tarot-symbol {
position: absolute;
left: 50%;
transform: translateX(-50%);
stroke: var(--color-acento);
fill: var(--color-acento);
filter: drop-shadow(0 0 8px var(--color-sombra));
width: 38px;
height: 38px;
top: -18px;
}
.widget-astrolabio .ornamental-needle {
width: 100px;
height: 34px;
}
.widget-astrolabio #hand-moon {
animation-duration: 130s;
animation-delay: -10s;
}
.widget-astrolabio #hand-card {
animation-duration: 210s;
animation-direction: reverse;
animation-delay: -80s;
}
.widget-astrolabio #hand-star {
animation-duration: 90s;
animation-delay: -10s;
}
.widget-astrolabio #hand-key {
animation-duration: 120s;
}
.widget-astrolabio #hand-solstice {
animation-duration: 330s;
animation-delay: 0s;
}
.widget-astrolabio #hand-equinox {
animation-duration: 50s;
animation-direction: reverse;
animation-delay: -20s;
}
.widget-astrolabio #hand-arcanum {
animation-duration: 175s;
animation-delay: -10s;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.widget-cta-container {
position: relative;
display: inline-block;
}
.widget-cta-container img {
display: block;
max-width: 100%;
height: auto;
border-bottom: 1px solid black;
}
.widget-cta-container img {
display: block;
max-width: 100%;
height: auto;
border-bottom: 1px solid black;
}
.widget-cta-button {
position: absolute;
top: 81%;
left: 53%;
transform: translate(-50%, -50%);
padding: 14px 22px;
font-size: 20px;
font-weight: bold;
background: #ff8800;
background: linear-gradient(90deg, rgba(255, 136, 0, 1) 3%, rgba(255, 156, 8, 1) 51%, rgba(255, 174, 74, 1) 100%);
border: none;
color: white;
border-radius: 12px;
cursor: pointer;
z-index: 10;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
animation-name: latido;
animation-duration: 1.9s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes latido {
0% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.04);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
.widget-cta-button:hover {
background-color: #0056b3;
transform: translate(-50%, -50%) scale(1.05);
animation-play-state: paused;
}
.noticias table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
margin-bottom: 30px;
font-size: 17px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.noticias th,
.noticias td {
font-size: 17px !important;
padding: 12px 20px !important;
text-align: left;
border-bottom: 2px solid #E0E0E0;
vertical-align: top;
}
.noticias thead th {
background-color: #333333;
color: #FFFFFF;
font-weight: 700;
letter-spacing: 0.5px;
}
.noticias tbody tr {
background-color: #FFFFFF;
}
.noticias tbody tr:nth-of-type(even) {
background-color: #f9f9f9;
}
.noticias tbody tr:hover {
background-color: #f1f1f1;
}
@media (max-width: 767px) {
.hero-section .widget-astrolabio {
margin-bottom: -60px;
}
.hero-section .widget-astrolabio .oracle-body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 70% !important;
height: 70% !important;
border-radius: 50%;
box-sizing: border-box;
background: transparent;
border: none;
box-shadow: none;
margin-top: 0px !important;
padding: 0;
}
.hero-section .widget-astrolabio .form-title {
margin-bottom: 10px !important;
font-size: 1.1em;
color: #000000;
padding-left: 0px;
padding-top: 0px;
padding-top: 37px;
line-height: 3.3;
letter-spacing: 0.5px;
}
.noticias .tabla-responsive-wrapper {
overflow-x: auto;
margin: 0 -15px;
padding: 0 15px;
}
.noticias table {
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.noticias th,
.noticias td {
padding: 12px 15px;
}
}
.faq-content {
padding: 20px;
line-height: 2.2;
font-size: 17px;
}
.noticias .faq-container {
margin-top: 30px;
}
.negro-autor-noticias {
background: #8B6B20;
background: linear-gradient(135deg, #4b380b 0%, #a47d26 70%);
border-radius: 10px;
position: relative;
padding: 0px 40px;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1),
0px 8px 10px rgba(0, 0, 0, 0.4),
0px 0px 15px rgba(51, 12, 13, 0.5);
}
.noticias {
-webkit-overflow-scrolling: touch;
margin-top: 20px !important;
color: #333333;
background: #FFFFFF;
border: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
border-radius: 8px;
padding: 30px 40px;
line-height: 1.7;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
@media (max-width: 767px) {
.noticias {
background: none;
border: none;
box-shadow: none;
padding: 0 5px !important;
margin: 0;
border-radius: 0;
}
div.noticias p {
font-size: 17px;
}
.noticias h1.espaciobajo {
padding-top: 10px;
}
}
.hero-section .text-section h1.espacio {
margin-top: 10px !important;
margin-bottom: 25px !important;
}
.noticias h1.espaciobajo {
font-size: 2.5em;
font-weight: 700;
text-align: center;
color: #1a1a1a;
margin-top: 0;
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 4px solid #FFD700;
}
.noticias h2 {
font-size: 2.2em;
text-align: center;
margin-top: 0px !important;
margin-bottom: 30px !important;
padding-bottom: 20px;
border-bottom: 3px solid #FFD700;
background: none;
color: #000 !important;
background: none;
box-shadow: none;
text-align: center;
}
.noticias .image-flipper {
position: relative;
margin: 40px auto;
}
.noticias .image-flipper:hover .flipper-front {
transform: rotateY(180deg);
}
.noticias .image-flipper:hover .flipper-back {
transform: rotateY(0deg);
}
.noticias .flipper-front,
.noticias .flipper-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform 2.8s ease;
}
.noticias .flipper-front img,
.noticias .flipper-back img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
border: 3px solid rgba(0, 0, 0, 0.1);
}
.noticias .flipper-back {
transform: rotateY(-180deg);
}
.image-flipper {
position: relative;
width: 500px;
height: 500px;
perspective: 1000px;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.flipper-front,
.flipper-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 4px solid black;
transition: transform 3.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.8s ease;
}
.flipper-front {
transform: rotateY(0deg);
z-index: 2;
}
.flipper-back {
transform: rotateY(180deg);
}
.image-flipper:hover .flipper-front {
transform: rotateY(-180deg);
}
.image-flipper:hover .flipper-back {
transform: rotateY(0deg);
}
.image-flipper:hover .flipper-front,
.image-flipper:hover .flipper-back {
border-color: #000000;
}
.image-flipper img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 767px) {
.noticias {
background: none;
border: none;
box-shadow: none;
margin: 0;
padding: 0 15px;
border-radius: 0;
}
.noticias h1.espaciobajo {
font-size: 1.8em;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom-width: 3px;
}
.image-flipper {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
margin-top: 20px;
margin-bottom: 20px;
}
.flipper-back {
display: none;
}
.flipper-front,
.image-flipper {
position: static;
transform: none !important;
transition: none;
perspective: none;
transform-style: flat;
}
.flipper-front {
border-color: #000000;
}
.noticias h2 {
font-size: 1.7em !important;
text-align: center;
margin-top: 0px !important;
margin-bottom: 30px !important;
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 20px;
border-bottom: 3px solid #FFD700;
background: none;
color: #000 !important;
background: none;
box-shadow: none;
text-align: center;
}
.negro-autor-noticias {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-bottom: 10px;
}
.negro-autor-noticias .portal-content-inline {
align-items: center;
gap: 5px;
}
.negro-autor-noticias .mystic-time-indicator {
margin-left: 17px;
}
div.noticias .breadcrumb {
margin-top: -13px !important;
margin-bottom: -15px !important;
font-size: 0px;
padding: 0px;
}
div.noticias .breadcrumb a,
div.noticias .breadcrumb span {
font-size: calc(15px - 5px);
}
div.noticias .breadcrumb li {
margin: 0;
padding: 0;
}
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
padding-top: 0 !important;
}
img {
max-width: 100%;
height: auto;
display: block;
}
@media (min-width: 768px) {
#menu-arriba>li>a {
font-weight: bold;
letter-spacing: 0.4px;
color: #E0E0E0;
position: relative;
transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.2s ease;
text-shadow:
0 0 7px rgba(255, 240, 200, 0.35),
0 0 10px rgba(255, 240, 200, 0.25);
}
#menu-arriba>li>a:not(#menu-item-16075 a):hover {
color: #FFFFFF;
text-shadow:
0 0 10px rgba(255, 245, 220, 0.7),
0 0 15px rgba(255, 245, 220, 0.5),
0 0 2px rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
#menu-item-16075 a {
color: #FFA500;
font-weight: bold;
text-shadow: none;
animation: brilloMisticoTarot 5s infinite ease-in-out;
}
#menu-item-16075 a:hover {
color: #FF8C00;
}
}
@keyframes brilloMisticoTarot {
0%,
100% {
text-shadow:
0 0 5px rgba(255, 220, 150, 0.6),
0 0 10px rgba(255, 180, 50, 0.5),
0 0 15px rgba(255, 165, 0, 0.3);
transform: scale(1);
}
50% {
text-shadow:
0 0 8px rgba(255, 255, 230, 0.9),
0 0 15px rgba(255, 200, 100, 0.8),
0 0 25px rgba(255, 170, 0, 0.7),
0 0 40px rgba(180, 100, 255, 0.2);
transform: scale(1.03);
}
}
.links-in-article-intro {
text-align: center;
margin-bottom: 60px;
padding: 0 15px;
}
.links-in-article-nav {
margin-top: -50px !important;
}
.links-in-article-intro p {
padding-bottom: 20px;
padding-top: 50px;
font-size: 1.75rem;
font-weight: 700;
text-align: center;
letter-spacing: 2px;
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6),
0 0 12px rgba(255, 255, 255, 0.4);
background: linear-gradient(90deg, #ffffff, #fefefe, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
opacity: 0;
filter: blur(5px) saturate(0.5);
transform: translateY(30px) scale(0.9);
animation: revealMysticTitle 2.5s 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes revealMysticTitle {
0% {
opacity: 0;
filter: blur(5px) saturate(0.5);
transform: translateY(30px) scale(0.9);
}
60% {
opacity: 0.8;
filter: blur(1px) saturate(1.2);
transform: translateY(-5px) scale(1.05);
}
100% {
opacity: 1;
filter: blur(0) saturate(1);
transform: translateY(0) scale(1);
}
}
.links-in-article-nav {
background-color: transparent;
margin: 0;
clear: both;
width: 100%;
box-sizing: border-box;
perspective: 800px;
}
.links-in-article-list {
display: flex;
justify-content: center;
align-items: flex-start;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: nowrap;
gap: 5px;
}
.links-in-article-item {
margin: 0;
padding: 0;
display: flex;
flex-shrink: 0;
}
.links-in-article-link {
margin-top: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
text-decoration: none;
transition: transform 0.3s ease-out;
}
.links-in-article-link:hover {
transform: translateY(-8px) scale(1.05);
}
.links-in-article-label {
display: block;
font-size: 18px;
font-weight: 600;
color: #ede7f6;
text-align: center;
line-height: 1.3;
transition: color 0.3s ease, text-shadow 0.3s ease;
white-space: nowrap;
margin-top: 12px;
margin-bottom: 18px;
opacity: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
transform: translateY(15px) scale(0.8);
animation: ascendLabel 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.links-in-article-link:hover .links-in-article-label {
color: #ffd700;
text-shadow: 0 0 5px #ffd700, 0 0 10px rgba(255, 215, 0, 0.5);
}
.links-in-article-circle {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid;
text-decoration: none;
position: relative;
box-shadow: 0 0 10px rgba(128, 0, 128, 0.3), 0 0 20px rgba(128, 0, 128, 0.2), inset 0 0 15px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
background-color 0.4s ease-out,
border-color 0.4s ease-out;
opacity: 0;
transform: scale(0.3) rotateY(90deg) translateZ(-50px);
animation: materializeCircle 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards,
levitateCircle 5s infinite alternate ease-in-out;
animation-play-state: running, paused;
}
.links-in-article-link:hover .links-in-article-circle {
transform: scale(1.15) rotateY(0deg) translateZ(0);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.2);
animation-play-state: running, paused !important;
}
.links-in-article-nav .links-in-article-link {
text-decoration: none;
}
.links-in-article-nav .links-in-article-link:hover,
.links-in-article-nav .links-in-article-link:focus {
text-decoration: none;
}
.links-in-article-circle.lia-amor-bg {
background: radial-gradient(circle, #c50063, #8c0046);
border-color: #f7007f;
}
.links-in-article-link:hover .links-in-article-circle.lia-amor-bg {
background: radial-gradient(circle, #ff4d4d, #cc0000);
border-color: #ff8080;
}
.links-in-article-circle.lia-dinero-bg {
background: radial-gradient(circle, #fabd64, #e6a541);
border-color: #fcd89e;
}
.links-in-article-link:hover .links-in-article-circle.lia-dinero-bg {
background: radial-gradient(circle, #ffd700, #b8860b);
border-color: #ffec8b;
}
.links-in-article-circle.lia-salud-bg {
background: radial-gradient(circle, #0077ff, #004c9e);
border-color: #3399ff;
}
.links-in-article-link:hover .links-in-article-circle.lia-salud-bg {
background: radial-gradient(circle, #5fb3ff, #357fde);
border-color: #a8d4ff;
}
.links-in-article-circle.lia-salud-bg svg {
fill: #e8f3ff;
}
.links-in-article-link:hover .links-in-article-circle.lia-salud-bg svg {
fill: #004c9e;
}
.links-in-article-circle.lia-invertida-bg {
background: radial-gradient(circle, #2e8b57, #006400);
border-color: #6bcb83;
}
.links-in-article-link:hover .links-in-article-circle.lia-invertida-bg {
background: radial-gradient(circle, #53d28b, #2e8b57);
border-color: #9be9b3;
}
.links-in-article-circle svg {
width: 50%;
height: 50%;
display: block;
fill: #f8f8ff;
transition: transform 0.4s ease-out, opacity 0.4s ease-out, filter 0.4s ease-out;
transform-origin: center center;
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}
.links-in-article-list .links-in-article-item:nth-child(1) .links-in-article-circle {
animation-delay: 3.5s, 4.7s;
}
.links-in-article-list .links-in-article-item:nth-child(1) .links-in-article-label {
animation-delay: 3.8s;
}
.links-in-article-list .links-in-article-item:nth-child(2) .links-in-article-circle {
animation-delay: 3.9s, 5.1s;
}
.links-in-article-list .links-in-article-item:nth-child(2) .links-in-article-label {
animation-delay: 4.2s;
}
.links-in-article-list .links-in-article-item:nth-child(3) .links-in-article-circle {
animation-delay: 4.3s, 5.5s;
}
.links-in-article-list .links-in-article-item:nth-child(3) .links-in-article-label {
animation-delay: 4.6s;
}
.links-in-article-list .links-in-article-item:nth-child(4) .links-in-article-circle {
animation-delay: 4.7s, 5.9s;
}
.links-in-article-list .links-in-article-item:nth-child(4) .links-in-article-label {
animation-delay: 5.0s;
}
@keyframes materializeCircle {
0% {
opacity: 0;
transform: scale(0.3) rotateY(90deg) translateZ(-50px);
}
70% {
opacity: 1;
transform: scale(1.1) rotateY(-15deg) translateZ(20px);
}
100% {
opacity: 1;
transform: scale(1) rotateY(0deg) translateZ(0);
animation-play-state: running, running;
}
}
@keyframes ascendLabel {
from {
opacity: 0;
transform: translateY(15px) scale(0.8);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes levitateCircle {
0% {
transform: translateY(0px) rotateX(2deg) rotateY(-2deg);
}
50% {
transform: translateY(-8px) rotateX(-3deg) rotateY(3deg) scale(1.02);
}
100% {
transform: translateY(0px) rotateX(2deg) rotateY(-2deg);
}
}
.links-in-article-circle::before,
.links-in-article-circle::after {
content: '';
position: absolute;
border-radius: 50%;
background: white;
opacity: 0;
animation: etherealWisps 4s infinite;
pointer-events: none;
box-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px #dda0dd;
animation-play-state: paused;
}
.links-in-article-circle::before {
width: 3px;
height: 3px;
top: 50%;
left: 50%;
}
.links-in-article-circle::after {
width: 5px;
height: 5px;
top: 50%;
left: 50%;
animation-delay: -2s;
}
.links-in-article-list .links-in-article-item:nth-child(1) .links-in-article-circle::before,
.links-in-article-list .links-in-article-item:nth-child(1) .links-in-article-circle::after {
animation-play-state: running;
animation-delay: 5.0s;
}
.links-in-article-list .links-in-article-item:nth-child(2) .links-in-article-circle::before,
.links-in-article-list .links-in-article-item:nth-child(2) .links-in-article-circle::after {
animation-play-state: running;
animation-delay: 5.4s;
}
.links-in-article-list .links-in-article-item:nth-child(3) .links-in-article-circle::before,
.links-in-article-list .links-in-article-item:nth-child(3) .links-in-article-circle::after {
animation-play-state: running;
animation-delay: 5.8s;
}
.links-in-article-list .links-in-article-item:nth-child(4) .links-in-article-circle::before,
.links-in-article-list .links-in-article-item:nth-child(4) .links-in-article-circle::after {
animation-play-state: running;
animation-delay: 6.2s;
}
@keyframes etherealWisps {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
25% {
transform: translate(calc(-50% + var(--x1, 15px)), calc(-50% + var(--y1, -20px))) scale(1);
opacity: 0.7;
}
50% {
transform: translate(calc(-50% + var(--x2, -10px)), calc(-50% + var(--y2, 25px))) scale(0.8);
opacity: 0.5;
}
75% {
transform: translate(calc(-50% + var(--x3, 20px)), calc(-50% + var(--y3, 10px))) scale(1.2);
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
}
.links-in-article-circle:nth-child(odd)::before {
--x1: -18px;
--y1: 15px;
--x2: 22px;
--y2: -12px;
--x3: -10px;
--y3: 20px;
}
.links-in-article-circle:nth-child(even)::before {
--x1: 12px;
--y1: -25px;
--x2: -15px;
--y2: 18px;
--x3: 25px;
--y3: -8px;
}
.links-in-article-circle:nth-child(odd)::after {
--x1: 20px;
--y1: 20px;
--x2: -25px;
--y2: -15px;
--x3: 10px;
--y3: -22px;
}
.links-in-article-circle:nth-child(even)::after {
--x1: -15px;
--y1: 10px;
--x2: 20px;
--y2: 25px;
--x3: -22px;
--y3: 12px;
}
.links-in-article-link:hover .links-in-article-circle::before,
.links-in-article-link:hover .links-in-article-circle::after {
animation-play-state: paused;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.links-in-article-link:hover .lia-amor-bg svg {
animation: heartBeatMagic 1.2s ease-in-out infinite;
}
@keyframes heartBeatMagic {
0%,
100% {
transform: scale(1);
opacity: 0.9;
filter: drop-shadow(0 0 4px #ff85a2);
}
25% {
transform: scale(1.3);
opacity: 1;
filter: drop-shadow(0 0 10px #ff3366) drop-shadow(0 0 5px #ff6699);
}
50% {
transform: scale(1);
opacity: 0.9;
filter: drop-shadow(0 0 4px #ff85a2);
}
75% {
transform: scale(1.2);
opacity: 1;
filter: drop-shadow(0 0 8px #ff3366);
}
}
.links-in-article-link:hover .lia-dinero-bg svg {
animation: coinRainAndShine 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
filter: drop-shadow(0 0 5px gold);
}
@keyframes coinRainAndShine {
0% {
transform: translateY(-50%) rotateY(0deg) scale(0.8);
opacity: 0;
}
30% {
transform: translateY(0) rotateY(180deg) scale(1.1);
opacity: 1;
filter: brightness(1.8) drop-shadow(0 0 8px #ffd700);
}
70% {
transform: translateY(5px) rotateY(360deg) scale(1.05);
opacity: 1;
filter: brightness(1.5) drop-shadow(0 0 6px #f0e68c);
}
100% {
transform: translateY(0) rotateY(360deg) scale(1);
opacity: 1;
filter: brightness(1.2);
}
}
.links-in-article-link:hover .lia-salud-bg svg {
animation: healingAuraPulse 2.5s ease-in-out infinite;
}
@keyframes healingAuraPulse {
0%,
100% {
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 3px #e0cfff) drop-shadow(0 0 1px #fff);
opacity: 0.9;
}
}
.links-in-article-link:hover .lia-invertida-bg svg {
animation: chaoticFlipAndSettle 2.2s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
}
@keyframes chaoticFlipAndSettle {
0% {
transform: rotateZ(0deg) rotateY(0deg) scale(1) translateX(0);
opacity: 1;
}
20% {
transform: rotateZ(-15deg) rotateY(90deg) scale(1.2) translateX(10px);
opacity: 0.7;
}
40% {
transform: rotateZ(15deg) rotateY(180deg) scale(0.8) translateX(-10px);
opacity: 1;
}
60% {
transform: rotateZ(-10deg) rotateY(270deg) scale(1.15) translateX(5px);
opacity: 0.6;
}
80% {
transform: rotateZ(10deg) rotateY(360deg) scale(0.9) translateX(-5px);
opacity: 1;
}
100% {
transform: rotateZ(0deg) rotateY(360deg) scale(1) translateX(0);
opacity: 1;
filter: drop-shadow(0 0 5px #a9a9a9);
}
}
.hero-section .text-section h1 {
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
color: white !important;
font-size: 2.65rem;
font-weight: 700;
line-height: 1.3;
text-align: center;
letter-spacing: 1px;
margin: -25px 0 20px;
padding: 20px 0;
background: linear-gradient(90deg, #ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
opacity: 0;
filter: blur(3px);
animation: appearMystic 2.5s ease-out forwards;
}
@keyframes appearMystic {
from {
opacity: 0;
filter: blur(3px);
}
to {
opacity: 1;
filter: blur(0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-section .text-section h1 {
animation: none !important;
opacity: 1 !important;
filter: none !important;
}
}
.hero-section .breadcrumb-trail.breadcrumbs {
padding: 5px 8px;
margin-bottom: 5px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
font-size: 14px;
text-align: left;
}
.hero-section .breadcrumb-trail ul.breadcrumb {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.hero-section .breadcrumb-trail ul.breadcrumb li {
margin-right: 5px;
color: #f0f0f0;
display: inline-flex;
align-items: center;
}
.hero-section .breadcrumb-trail ul.breadcrumb li:not(:last-child)::after {
content: ">";
margin: 0 8px;
color: #cccccc;
}
.hero-section .breadcrumb-trail ul.breadcrumb li a {
font-weight: bold;
letter-spacing: 0.3px;
color: #ffffff;
text-decoration: none;
display: inline-block;
}
.hero-section .breadcrumb-trail ul.breadcrumb li a:hover {
color: #fabd64;
text-decoration: underline;
}
.hero-section .breadcrumb-trail ul.breadcrumb li:last-child span[itemprop="name"] {
color: #fabd64;
font-weight: bold;
}
.hero-section .breadcrumb-trail ul.breadcrumb li a span[itemprop="name"] {
color: #ffffff;
}
.hero-section .breadcrumb-trail ul.breadcrumb li a:hover span[itemprop="name"] {
color: #fabd64;
}
@media (max-width: 768px) {
.hero-section .breadcrumb-trail.breadcrumbs {
font-size: 13px;
padding-top: 20px;
margin-bottom: 30px;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
width: 100%;
scrollbar-width: thin;
scrollbar-color: rgba(204, 204, 204, 0.5) transparent;
}
.hero-section .breadcrumb-trail.breadcrumbs::-webkit-scrollbar {
height: 5px;
background-color: transparent;
}
.hero-section .breadcrumb-trail.breadcrumbs::-webkit-scrollbar-thumb {
background-color: rgba(204, 204, 204, 0.5);
border-radius: 3px;
}
.hero-section .breadcrumb-trail ul.breadcrumb {
display: flex;
flex-wrap: nowrap;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
}
.hero-section .breadcrumb-trail ul.breadcrumb li {
flex-shrink: 0;
margin: 0;
}
.hero-section .breadcrumb-trail ul.breadcrumb li a,
.hero-section .breadcrumb-trail ul.breadcrumb li>span[itemprop="name"]:not(a > span[itemprop="name"]) {
display: inline-block;
padding: 0 4px;
line-height: 1.4;
color: #ffffff;
text-decoration: none;
}
.hero-section .breadcrumb-trail ul.breadcrumb li:first-child a,
.hero-section .breadcrumb-trail ul.breadcrumb li:first-child>span[itemprop="name"]:not(a > span[itemprop="name"]) {
padding-left: 8px;
}
.hero-section .breadcrumb-trail ul.breadcrumb li:last-child a,
.hero-section .breadcrumb-trail ul.breadcrumb li:last-child>span[itemprop="name"] {
padding-right: 8px;
}
.hero-section .breadcrumb-trail ul.breadcrumb li:last-child span[itemprop="name"] {
color: #fabd64;
font-weight: bold;
}
.hero-section .breadcrumb-trail ul.breadcrumb li a:hover,
.hero-section .breadcrumb-trail ul.breadcrumb li a:hover span[itemprop="name"] {
color: #fabd64;
text-decoration: underline;
}
.hero-section .breadcrumb-trail ul.breadcrumb li:not(:last-child)::after {
content: ">";
color: #cccccc;
margin: 0 6px;
}
}
.contenedormenu {
z-index: 999;
}
.tarot-nav-svg-v6 ul {
display: flex;
justify-content: center;
align-items: flex-start;
list-style: none;
margin: -22px 0 10px;
padding: 0;
padding-top: 70px;
flex-wrap: wrap;
gap: 0 15px;
position: relative;
background-color: black;
}
.tarot-nav-svg-v6 li {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 90px;
transition: transform 0.4s ease-out;
}
.tarot-nav-svg-v6 li:nth-child(1),
.tarot-nav-svg-v6 li:nth-child(7) {
transform: translateY(0px);
}
.tarot-nav-svg-v6 li:nth-child(2),
.tarot-nav-svg-v6 li:nth-child(6) {
transform: translateY(-20px);
}
.tarot-nav-svg-v6 li:nth-child(3),
.tarot-nav-svg-v6 li:nth-child(5) {
transform: translateY(-30px);
}
.tarot-nav-svg-v6 li:nth-child(4) {
transform: translateY(-40px);
}
.nav-label {
display: block;
margin-bottom: 13px;
font-family: fantasy;
font-size: 18px;
font-weight: 500;
color: white;
letter-spacing: 0.3px;
text-align: center;
line-height: 1.2;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.nav-circle-svg {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-image: linear-gradient(to bottom, #4B0082, #1a1a1a);
border: 1px solid black;
text-decoration: none;
position: relative;
overflow: visible;
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.tarot-nav-svg-v6 li:hover .nav-circle-svg {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.nav-circle-svg svg {
width: 65%;
height: 65%;
display: block;
fill: white;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.nav-circle-svg svg path:nth-child(odd) {
fill: #CC8450;
}
.tarot-nav-svg-v6 li:hover .link-amor-bg svg {
transform: scale(1.3);
}
.tarot-nav-svg-v6 li:hover .link-sino-bg svg {
transform: rotateY(360deg);
}
.tarot-nav-svg-v6 li:hover .link-pregunta-bg svg {
animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both infinite;
}
.tarot-nav-svg-v6 li:hover .link-salud-bg svg {
transform: scale(1.2);
}
.tarot-nav-svg-v6 li:hover .link-dinero-bg svg {
transform: rotateY(180deg) scale(1.1);
}
.tarot-nav-svg-v6 li:hover .link-sayo-bg svg {
animation: pulse 0.6s ease-in-out infinite alternate;
}
.tarot-nav-svg-v6 li:hover .link-gitano-bg svg {
transform: scale(1.1) rotate(5deg);
}
.nav-circle-svg.link-sayo-bg svg,
.nav-circle-svg.link-pregunta-bg svg {
}
.tarot-nav-svg-v6 li:hover .link-sayo-bg svg {
animation: pulse 0.6s ease-in-out infinite alternate;
}
.tarot-nav-svg-v6 li:hover .link-pregunta-bg svg {
animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both infinite;
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0) rotate(-1deg);
}
20%,
80% {
transform: translate3d(1px, 0, 0) rotate(1deg);
}
30%,
50%,
70% {
transform: translate3d(-2px, 0, 0) rotate(-2deg);
}
40%,
60% {
transform: translate3d(2px, 0, 0) rotate(2deg);
}
}
@keyframes sway {
from {
transform: rotate(-8deg);
}
to {
transform: rotate(8deg);
}
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
@media (max-width: 767px) {
.tarot-nav-svg-v6 ul {
margin-top: 10px;
margin-bottom: -20px;
padding-bottom: 30px;
gap: 20px 25px;
justify-content: center;
}
.tarot-nav-svg-v6 li {
transform: translateY(0);
width: 70px;
}
.nav-label {
font-size: 12px;
margin-bottom: 6px;
}
.nav-circle-svg {
width: 35px;
height: 35px;
}
.nav-circle-svg svg {
width: 60%;
height: 60%;
}
.tarot-nav-svg-v6 li:hover .link-sayo-bg svg,
.tarot-nav-svg-v6 li:hover .link-pregunta-bg svg {
}
.nav-circle-svg.link-sayo-bg svg,
.nav-circle-svg.link-pregunta-bg svg {
}
}
.footer-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.legal-menu-box {
background: linear-gradient(to bottom, #000000 40%, #3a003f 100%);
border: 2px solid #ffffff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
max-width: 350px;
margin: 24px auto;
}
.legal-title {
font-weight: 700;
text-align: center;
font-size: 30px;
text-transform: uppercase;
margin-bottom: 20px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
color: #e74c3c;
}
.social-title {
margin-top: 10px;
font-weight: 700;
text-align: center;
font-size: 30px;
text-transform: uppercase;
margin-bottom: 20px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
color: #e74c3c;
}
.legal-menu-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.legal-menu-list {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.legal-menu-list li a {
display: block;
padding: 12px;
border: 2px solid #ffffff;
color: #ffffff;
text-align: center;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
background-color: transparent;
}
.legal-menu-list li a:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
footer {
border-top: 3px groove #000;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}
.latam-menu-box {
margin-top: 23px;
border-radius: 12px;
padding: 20px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
max-width: 750px;
background: black;
margin-left: auto;
margin-right: auto;
}
.latam-title {
font-weight: 700;
text-align: center;
font-size: 30px;
text-transform: uppercase;
margin-bottom: 20px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
color: #e74c3c;
}
.latam-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.latam-menu-grid a {
background: #d51313;
display: block;
padding: 12px;
border: 1px solid #ffffff;
color: #ffffff;
text-align: center;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.latam-menu-grid a:hover {
background-color: rgba(213, 19, 19, 0.8);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
@media (max-width: 700px) {
.latam-menu-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.latam-menu-grid {
grid-template-columns: 1fr;
}
}
.footer-social-icons .social-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.footer-social-icons .social-list a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
color: #ffffff;
font-size: 35px;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.footer-social-icons .social-list a:hover {
background-color: #007bff;
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.footer-social-icons {
padding: 10px 0;
}
.hierarchical-menu .top-level-menu {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.hierarchical-menu .top-level-menu li {
position: relative;
list-style: none;
}
.hierarchical-menu .top-level-menu>li>a {
display: block;
padding: 12px;
border: 1px solid #ffffff;
color: #ffffff;
text-align: center;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
background: #d51313;
position: relative;
}
.hierarchical-menu .top-level-menu>li.menu-item-has-children>a::after {
content: ' ▼';
font-size: 0.7em;
margin-left: 5px;
display: inline-block;
}
.hierarchical-menu .top-level-menu>li>a:hover {
background-color: rgba(213, 19, 19, 0.8);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.hierarchical-menu ul.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #34495e;
border: 1px solid #ffffff;
border-radius: 0 0 8px 8px;
padding: 10px;
margin: 0;
list-style: none;
min-width: 220px;
z-index: 1000;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.hierarchical-menu ul.sub-menu ul.sub-menu {
top: 0;
left: 100%;
border-radius: 8px;
margin-top: -1px;
}
.hierarchical-menu li.menu-item-has-children:hover>ul.sub-menu {
display: block;
}
.hierarchical-menu ul.sub-menu li a {
display: block;
padding: 8px 15px;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
border-radius: 4px;
transition: background-color 0.2s ease;
text-align: left;
font-weight: normal;
border: none;
background: none;
}
.hierarchical-menu ul.sub-menu li a:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: none;
box-shadow: none;
}
.footer-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.footer-btn {
flex: 1 1 calc(25% - 20px);
min-width: 120px;
text-align: center;
padding: 10px 15px;
background-color: #c97700;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
transition: background-color 0.3s ease;
}
.footer-btn:hover {
background-color: #ffffff;
color: #c97700;
}
@media screen and (max-width: 768px) {
#tarot-dia-gitano-result ol,
#tarot-dia-gitano-result ul {
padding-left: 20px;
margin-bottom: 10px;
}
#tarot-dia-gitano-result ol li,
#tarot-dia-gitano-result ul li {
font-size: 13px;
line-height: 1.6;
margin-bottom: 8px;
}
#tarot-dia-gitano-result ol li::marker,
#tarot-dia-gitano-result ul li::marker {
font-size: 1em;
}
}
#card-content-tarot-del-dia .tarotrespuesta .ppfcontainer h2.ppf {
border: 0;
display: block;
background-color: #984319;
color: #fff;
font-size: 36px !important;
padding-top: 20px !important;
font-family: fantasy !important;
text-transform: uppercase;
margin-top: -20px !important;
margin-bottom: 25px !important;
}
@media screen and (max-width: 768px) {
.text-center.top-title.carttta {
font-size: 18px !important;
font-family: inherit !important;
}
#card-content-tarot-del-dia .tarotrespuesta .ppfcontainer h2.ppf {
font-size: 18px !important;
font-family: inherit !important;
}
.alignleft {
display: block !important;
margin: 20px auto !important;
padding: 20px !important;
float: none !important;
text-align: center;
}
}
#card-content-tarot-del-dia .tarotrespuesta p {
margin: 10px 0;
font-size: 18px !important;
text-align: left;
padding-right: 20px;
padding-left: 20px;
}
#card-content-tarot-del-dia {
background-color: #fff;
position: relative;
margin-top: -40px !important;
padding-bottom: 20px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 20px !important;
display: block;
overflow: hidden;
border: 10px solid #e3e3e3;
border-radius: 10px;
}
#card-content-tarot-del-dia .carttta {
margin-top: 2px !important;
font-size: 20px;
}
.text-center.top-title.carttta {
font-family: fantasy;
text-align: center;
font-size: 36px !important;
font-weight: bold;
color: #333;
padding: 9px;
}
#card-content-tarot-del-dia .mensajes {
width: auto;
padding-top: 35px !important;
text-align: center;
}
#card-content-tarot-del-dia .mensajes span {
border-radius: 5px !important;
padding: 10px 25px !important;
color: #fff !important;
background-color: #d17c00 !important;
font-weight: bold !important;
line-height: 1 !important;
font-size: 24px !important;
letter-spacing: 1px !important;
cursor: pointer !important;
}
#card-content-tarot-del-dia ul.cards-container-tarot-del-dia {
overflow: hidden;
list-style-type: none;
margin: 12px auto 0 !important;
padding: 0;
max-width: 1400px !important;
text-align: center;
padding-bottom: 15px !important;
}
#card-content-tarot-del-dia .tarotrespuesta .ppfcontainer h2.ppf {
border: 0;
display: block;
background-color: #984319;
color: #fff;
font-size: 36px;
padding-top: 20px;
font-family: fantasy;
text-transform: uppercase;
margin-top: -20px;
margin-bottom: 25px;
}
#card-content-tarot-del-dia .tarotrespuesta p {
margin: 10px 0;
font-size: 18px;
text-align: left;
padding-right: 20px;
padding-left: 20px;
}
#card-content-tarot-del-dia {
background-color: #fff;
position: relative;
margin-top: -40px;
padding-bottom: 20px;
padding-left: 0;
padding-right: 0;
padding-top: 20px;
display: block;
overflow: hidden;
border: 10px solid #e3e3e3;
border-radius: 10px;
}
#card-content-tarot-del-dia .carttta {
margin-top: 2px;
font-size: 20px;
}
.text-center.top-title.carttta {
font-family: fantasy;
text-align: center;
font-size: 36px;
font-weight: bold;
color: #333;
padding: 9px;
}
#card-content-tarot-del-dia .mensajes {
width: auto;
padding-top: 35px;
text-align: center;
}
#card-content-tarot-del-dia .mensajes span {
border-radius: 5px;
padding: 10px 25px;
color: #fff;
background-color: #d17c00;
font-weight: bold;
line-height: 1;
font-size: 24px;
letter-spacing: 1px;
cursor: pointer;
}
#card-content-tarot-del-dia ul.cards-container-tarot-del-dia {
overflow: hidden;
list-style-type: none;
margin: 12px auto 0;
padding: 0;
max-width: 1400px;
text-align: center;
padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
.text-center.top-title.carttta {
font-size: 18px;
font-family: inherit;
}
#card-content-tarot-del-dia .tarotrespuesta .ppfcontainer h2.ppf {
font-size: 18px;
font-family: inherit;
}
.alignleft {
display: block;
margin: 20px auto;
padding: 20px;
float: none;
text-align: center;
}
}
#formulario-tarot h2 {
font-family: "Papyrus", "Comic Sans MS", cursive;
background: transparent;
margin-top: 20px;
}
.luna-info {
font-size: 20px;
margin-top: 20px;
padding: 15px;
background: #6a0dad;
color: white;
border-radius: 8px;
display: inline-block;
}
.moon-table {
margin: auto;
border-collapse: collapse;
width: 60%;
background: white;
color: black;
border-radius: 10px;
overflow: hidden;
}
.moon-table th,
.moon-table td {
padding: 15px;
border-bottom: 1px solid #ddd;
text-align: center;
}
.moon-table tr:last-child td {
border-bottom: none;
}
h1 {
font-size: 40px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
margin-bottom: 12px;
padding-top: 0px;
margin-top: 3px;
border-bottom: 1px solid #7e7e7e;
}
iframe {
max-width: 100%;
width: 100%;
height: auto;
display: block;
}
.comment-author cite,
.primary-sidebar ul li a,
.woocommerce ul.products li.product .price,
span.asap-author,
.content-cluster .show-extract span {
color: #000000;
}
.ti {
display: none;
}
.site-header {
border-bottom: 3px solid rgba(255, 255, 255, 0.04);
}
@media screen and (max-width: 768px) {
.site-header {
border-bottom: #000 0px solid;
}
}
.horoscope-list {
max-height: 100%;
padding-left: 10px;
padding-right: 10px;
background: linear-gradient(207deg, rgba(175, 190, 25, 1) 0%, rgba(112, 0, 167, 0.6475183823529411) 100%);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 30px;
display: flex;
flex-wrap: wrap;
border-bottom: #000000 1px solid;
border-top: #000000 1px solid;
gap: 20px;
}
.horoscope-list li {
text-align: center;
font-size: 19px;
flex: 1 1 calc(25% - 15px - 1px);
position: relative;
background-color: #fdfdfd;
border-radius: 22px;
padding: 15px;
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
}
.horoscope-list strong {
font-family: fantasy;
text-align: center;
font-size: 27px;
color: #2d016f;
display: block;
margin-bottom: 5px;
}
.article-full {
display: inline-block;
vertical-align: top;
}
.the-content h2 {
margin-top: 2.5rem;
margin-bottom: 1.5rem;
}
h2 {
color: #FFFFFF !important;
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(51, 9, 121, 1) 100%, rgba(0, 212, 255, 1) 100%);
box-shadow: 2px 6px 6px rgba(0, 0, 120, .5), 0 1px 3px rgba(0, 0, 120, .1);
text-align: center;
border-bottom: #000000 2px solid;
font-size: 2rem;
border-radius: 5px;
font-weight: bold;
letter-spacing: 0.9px;
padding: 14px;
}
#card-content-marsella h2.top-title {
background: transparent;
color: #fff;
font-family: inherit;
font-size: 24px;
border-bottom: #fefefe 2px solid;
box-shadow: none;
}
@media only screen and (max-width: 600px) {
h2:not(#card-content-marsella h2.top-title) {
font-size: 1.5rem;
border-radius: 0;
margin-left: 0;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 15px;
padding-right: 15px;
}
}
.divcontenedor {
border: #000000 3px solid;
background: transparent;
}
.divA {
background: #F4F4F4;
padding: 3px 10px;
margin-bottom: 15px;
box-shadow: 8px 8px 8px rgba(0, 0, 0, .2), 0 6px 5px rgba(0, 0, 0, .3);
border-radius: 50px;
}
.divB,
.divC,
.divD {
text-align: center;
}
.divB {
padding: 2px 10px 2px 14px;
}
.divC {
font-size: 14px;
padding-top: 12px;
}
.divD {
font-size: 17px;
margin-top: -21px;
padding: 5px 6px;
color: #000000;
}
#opiniones {
background: #FFFFFF;
border-radius: 500px;
border: #000 1px groove;
box-shadow: 8px 8px 8px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .3);
padding: 5px;
margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
}
.brillo,
.brillo2,
.brillo3,
.brillo4,
.brillo5,
.brillo6,
.brilloamor,
.brillosalud,
.brillodinero,
.brillofamilia {
box-shadow: 12px 10px 112px rgba(22, 22, 100, 0), 0 5px 16px rgba(22, 22, 100, .99);
border-bottom: 1px groove #dee2e6;
border-radius: 12px;
padding: 6px 12px;
background-color: #FFFFFF;
}
.brillo2 {
box-shadow: 12px 10px 112px rgba(222, 0, 0, .99), 0 12px 80px rgba(222, 0, 0, .99);
}
.brillo4 {
background-color: #F9F9F9;
padding: 8px 12px 3px 12px;
}
.brillo6 {
padding: 13px 17px 7px 16px;
margin-bottom: 14px;
box-shadow: 7px 7px 7px rgba(0, 0, 0, .2), 0 6px 9px rgba(0, 0, 0, .3);
border: #000000 0.6px groove;
}
.carta {
background-color: #F2F5FF;
border-bottom: 0px groove #dee2e6;
padding: 10px;
border-radius: 20px;
box-shadow: 7px 3px 5px rgba(0, 122, 222, .222), 0 5px 5px rgba(0, 122, 222, .222);
}
.infcarta {
background: white;
padding: 0 0 12px 0;
border-top: none;
border-radius: 1px;
box-shadow: 8px 2px 6px rgba(0, 0, 0, .222), 0 5px 5px rgba(0, 0, 0, .222);
}
.infcarta h2 {
margin-top: 0;
border-radius: 0;
}
.infcarta li {
padding-right: 10px;
margin-left: 35px;
}
.infnota {
background: white;
font-size: 18px;
text-align: center;
border-radius: 22px;
box-shadow: 8px 2px 6px rgba(222, 0, 0, .222), 0 5px 5px rgba(222, 0, 0, .222);
margin-bottom: 13px;
padding: 4px;
}
.amor,
.dinero,
.salud {
background: #EFEFEF;
text-align: center;
box-shadow: 8px 2px 6px rgba(0, 222, 0, .0), 0 5px 5px rgba(220, 12, 0, .22);
}
h3 {
color: #172155;
padding: 10px 0;
font-size: 33px !important;
font-weight: bold;
letter-spacing: 0.2px;
padding-bottom: 15px;
margin-bottom: 15px;
position: relative;
border-bottom: none;
}
h4 {
color: #172155;
padding-bottom: 10px;
padding-top: 25px;
padding-left: 0;
padding-right: 0;
font-size: 25px;
font-weight: bold;
display: inline-block;
letter-spacing: 0.2px;
border-bottom: 2px solid rgba(23, 33, 85, 0.09);
}
.fakeh4 {
text-align: center;
color: #172155;
padding-top: 2px;
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
font-size: 25px;
font-weight: bold;
letter-spacing: 0.2px;
border-bottom: 2px solid rgba(23, 33, 85, 0.09);
}
.su-note {
margin: 20px 0 1.5em 0;
border-width: 1px;
border-style: solid;
}
.su-note-inner {
padding: 0.5em;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
}
.su-note h3 {
color: #172155;
padding-bottom: 14px;
padding-left: 0;
padding-right: 0;
padding-top: 0;
font-size: 33px;
font-weight: bold;
}
@media screen and (max-width: 640px) {
h3,
.su-note h3 {
font-size: 1.7rem;
}
}
#img {
background-color: black;
box-shadow: 7px 7px 7px rgba(0, 0, 0, .2), 0 6px 5px rgba(0, 0, 0, .3);
}
#cta {
background-color: #4267b2 !important;
color: #FFFFFF !important;
padding: 6px 12px;
box-shadow: 7px 8px 7px rgba(0, 0, 0, .2), 0 6px 5px rgba(0, 0, 0, .3);
border: #000000 1px groove;
}
#ctar {
background-color: #fefefe !important;
color: #000000 !important;
padding: 6px 12px;
box-shadow: 2px 0px 6px rgba(0, 0, 200, .2), 0 6px 5px rgba(0, 0, 50, .3);
border: #000000 1px groove;
}
.gallery {
margin-bottom: 1px;
}
.gallery .gallery-item {
max-width: 50% !important;
}
.gallery .gallery-icon {
transition: transform .4s;
border: 5px solid #fff;
border-radius: 2px;
box-shadow: 0 3px 7px rgb(0 0 0 / 50%);
}
.gallery .gallery-icon img {
width: calc(100% - 14px);
height: calc(100% - 14px);
margin: 7px;
}
.gallery .gallery-icon:hover {
border: 1px solid #164A41;
transform: scale(1.1);
}
#card-content-marsella .mensajes span {
border: #E7F5FF 2px groove;
padding: 0 15px;
color: #fff;
background-color: #4267b2;
margin: 0 5px;
line-height: 1;
font-size: 20px;
}
.btn {
margin: 10px !important;
background: orange;
padding: 20px;
letter-spacing: 0.5px;
font-weight: bold;
font-family: arial-black;
color: white;
text-decoration: none;
box-shadow: 2px 2px 1px rgba(10, 10, 10, .2), 0 3px 4px rgba(10, 10, 10, .3);
border-radius: 40px;
}
@media (max-width: 768px) {
th,
td {
padding-bottom: 15px !important;
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 15px !important;
vertical-align: middle;
}
table:not(#custom-tarot-table) {
width: 100%;
}
table:has(tr:first-child td:nth-child(3)):not(#custom-tarot-table),
table:has(tr:first-child th:nth-child(3)):not(#custom-tarot-table) {
width: 100%;
display: block;
overflow-x: auto;
overflow-y: auto;
white-space: nowrap;
margin-left: 0 !important;
scroll-behavior: smooth;
}
.no-ads .google-auto-placed {
display: none !important;
}
table:not(#custom-tarot-table) th,
table:not(#custom-tarot-table) td {
font-size: 14px !important;
}
}
table {
width: auto;
border-collapse: collapse;
line-height: 28px;
table-layout: fixed !important;
box-shadow: 1px 1px 4px rgba(10, 10, 100, 0.229), 3px 5px 3px rgba(10, 10, 100, 0.223);
}
th,
td {
padding-bottom: 25px !important;
padding-left: 25px !important;
padding-right: 15px !important;
padding-top: 15px !important;
vertical-align: middle;
}
caption {
color: #fff;
background: #000;
}
td:first-child {
font-weight: bold;
text-align: left;
background-color: #f3f3f3;
vertical-align: middle;
}
td:nth-child(2) {
font-size: 18px;
text-align: left;
vertical-align: middle;
}
td:nth-child(3) {
text-align: left;
vertical-align: middle;
}
td:nth-child(4) {
text-align: left;
vertical-align: middle;
}
td:nth-child(5) {
text-align: left;
}
.minititulo {
font-family: 'Great Vibes', cursive;
font-size: 25px !important;
padding: 20px;
}
.caja2 {
background-color: #fefefe;
padding: 7px 12px;
border-bottom: 1px groove #dee2e6;
border-radius: 20px;
box-shadow: 7px 3px 5px rgba(0, 0, 0, .22), 0 5px 5px rgba(0, 0, 0, .22);
}
.fecha {
text-align: center;
letter-spacing: 0.2px;
font-style: italic;
font-size: 15px;
padding: 6px 1px 3px 6px;
border-bottom: 0.1px solid #000 !important;
}
.botonnormal {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
width: 300px;
margin: 0 auto;
letter-spacing: 0.9px;
background-color: #ff8c00;
color: #ffffff;
padding: 15px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
transition: transform 0.2s ease;
}
.snip1515 {
padding: 0 10px;
text-align: center;
line-height: 1.5em;
font-size: 16px;
margin: 0 auto;
box-shadow: 2px 33px 21px -33px rgba(0, 1, 115, 1);
display: block;
}
.snip1515 .profile-image {
min-width: 50px;
max-width: 140px;
display: inline-block;
width: 50%;
z-index: 1;
position: relative;
padding: 2px;
}
.snip1515 .profile-image img {
max-width: 100%;
vertical-align: middle;
box-shadow: 1px 2px 3px rgba(0, 10, 100, .2), 0 3px 6px rgba(0, 10, 100, .3);
display: block;
}
.snip1515 figcaption {
width: 100%;
background-color: #F7F7F7;
color: black;
padding: 120px 0 0;
margin-top: -105px;
display: inline-block;
box-sizing: border-box;
}
.snip1515 .nombre-testimonio,
.snip1515 .cliente-testimonio,
.snip1515 .testimonio-testimonio,
.snip1515 .cliente-traduccion,
.snip1515 .starts-testimonio,
.snip1515 .btn-opinion {
text-align: center;
}
.snip1515 .nombre-testimonio {
margin-top: -15px;
padding: 0 20px 15px 20px;
letter-spacing: 0.4px;
font-size: 16px;
}
.snip1515 .cliente-testimonio,
.snip1515 .cliente-traduccion {
font-weight: bold;
padding: 8px 15px;
border-radius: 0;
background: #ffffff;
letter-spacing: 1px;
box-shadow: 0 0 2px rgba(0, 10, 100, .0), 0 0 9px rgba(0, 10, 100, .3);
}
.snip1515 .testimonio-testimonio {
text-align: left;
padding: 15px 15px 2px 20px;
color: #000000;
line-height: 30px;
font-size: 1.1em;
letter-spacing: 0.2px;
opacity: 0.9;
}
.snip1515 .starts-testimonio {
font-size: 22px;
padding: 10px 0 18px;
color: #DEBD2A;
}
.snip1515 .btn-opinion {
display: inline-block;
padding: 14px;
border-radius: 10px;
color: white;
font-size: 16px;
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(51, 9, 121, 1) 100%, rgba(0, 212, 255, 1) 100%);
box-shadow: 4px 6px 6px rgba(10, 10, 100, .2), 0 3px 4px rgba(10, 10, 100, .3);
text-decoration: none;
transition: transform .3s linear, background-color 0.3s linear;
}
.snip1515 .btn-opinion:hover {
background: orange;
transform: scale(1.1);
}
.autor,
.autor2,
.autor3 {
align-items: center;
display: flex;
box-shadow: 5px 1px 7px rgba(0, 0, 0, .2), 0 0 5px rgba(0, 0, 0, .3);
}
.autor {
padding: 6px 1px 6px 30px;
}
.autor1 {
font-size: 14px;
letter-spacing: 0.2rem;
margin-left: -70px;
margin-top: -66px;
}
.autor2 {
margin-bottom: 17px;
padding: 6px 1px 6px 2px;
box-shadow: 5px 7px 7px rgba(0, 0, 0, .2), 0 0 5px rgba(0, 0, 0, .3);
}
.autor3 {
border: #0F4C75 6px double;
background-color: #fff;
margin-bottom: 17px;
padding: 5px 15px 4px 0;
box-shadow: 2px 7px 7px rgba(0, 0, 0, .2), 0 0 5px rgba(0, 0, 0, .3);
}
.nombre {
padding-left: 25px;
font-size: 16px;
letter-spacing: 0.2rem;
color: #2196f3;
}
.cargo,
.cargo2 {
font-size: 16px;
letter-spacing: 0.2rem;
}
.cargo2 {
margin-right: -6px;
padding-right: 6px;
}
.imgautor {
width: 77px;
box-shadow: 1px 1px 1px rgba(0, 100, 0, .1), 0 0 1px rgba(0, 100, 0, .44);
display: block;
}
.imgautor2 {
width: 100%;
border-radius: 20%;
margin-right: 1rem;
max-width: 7rem;
padding-left: 8px;
display: block;
}
#imgautormovil {
border-radius: 90px;
border: #164A41 1px groove;
box-shadow: 1px 0 7px rgba(0, 100, 0, .32), 0 0 3px rgba(0, 140, 0, .3);
display: block;
}
@media (max-width: 700px) {
.separador {
margin-bottom: 0;
}
#img {
background-color: #164A41;
padding: 3px;
box-shadow: 7px 0 7px rgba(0, 0, 0, .2), 0 0 5px rgba(0, 0, 0, .3);
}
.autor {
padding: 4px 0;
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
box-sizing: border-box;
}
.autor .imgautor {
position: relative;
left: 4%;
width: 100px;
}
.autor .nombre {
position: relative;
left: 1%;
font-size: 14px;
letter-spacing: 0.1rem;
}
.autor .cargo {
margin-left: 16px;
font-size: 14px;
letter-spacing: 0.1rem;
}
}
.contacto {
padding: 22px 30px 1px;
font-size: 22px;
text-align: left;
background: #fbfbfb;
box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
.anchocompleto {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
overflow: hidden;
padding: 25px 0 15px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-top: 5px solid #dbdbdb;
border-bottom: 5px solid #dbdbdb;
box-sizing: border-box;
}
.anchocontenedor {
margin: 0 240px;
max-width: calc(100% - 480px);
}
#circular {
box-shadow: 3px 7px 20px rgba(0, 0, 0, 0.3);
border-top: 5px solid #dbdbdb;
border-radius: 330px;
border-bottom: 5px solid #dbdbdb;
}
.fondollamada {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.199) 0%, rgba(240, 243, 255, 1) 100%);
margin-top: -5.3rem;
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
overflow-x: hidden;
overflow: hidden;
text-align: center;
padding: 20px 180px 12px 180px;
border-top: 5px solid #dbdbdb;
border-bottom: 5px solid #dbdbdb;
box-sizing: border-box;
}
.separador,
.separador2 {
margin-bottom: 45px;
padding-top: 20px;
}
.dark-section p {
color: #000;
}
.tarot-links {
font-family: Arial, sans-serif;
width: 50%;
margin: 0 auto;
border-collapse: collapse;
}
.tarot-links td {
background-color: #f2f2f2;
color: #333;
font-size: 20px;
padding: 15px;
border: 1px solid #ddd;
text-align: center;
border-radius: 8px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
.tarot-links a {
color: #5a3f50;
text-decoration: none;
}
.tarot-links a:hover {
color: #7a5478;
}
@media (max-width: 767px) {
#menu {
top: 30%;
}
}
.the-content p {
margin-bottom: 1.75em !important;
line-height: 1.7;
}
#aja {
width: 20%;
height: 100%;
display: inline-block;
}
.cta-container2 {
max-width: 1200px;
border-radius: 30px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.cta-background {
background-image: url('https://tarots.online/wp-content/uploads/2024/09/llama-ahora-gratis-e1727179340582.webp');
background-size: cover;
background-position: center;
position: relative;
color: #ffffff;
padding: 15px;
text-align: center;
}
.cta-content {
font-family: Arial, sans-serif;
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
padding: 30px;
}
.cta-container2 h2 {
box-shadow: 1px 75px 22px rgba(110, 110, 20, .5), 0 1px 3px rgba(0, 0, 20, .1);
text-align: center;
border: #000000 2px solid;
border-radius: 30px;
font-size: 1.8rem;
font-family: 'Arial Black', Gadget, sans-serif;
margin-top: 2px;
padding: 10px;
background: linear-gradient(207deg, rgba(255, 121, 0, 1) 0%, rgba(255, 226, 0, 1) 0%, rgba(80, 65, 0, 1) 100%, rgba(0, 212, 255, 1) 100%);
color: #fff;
}
.cta-subtitle {
margin-top: 30px;
font-size: 22px;
margin-bottom: 20px;
}
.cta-subtitle span {
display: block;
}
.partner {
font-weight: bold;
color: #ffd700;
}
.cta-description {
color: #fff;
font-size: 22px;
margin-bottom: 20px;
line-height: 1.5;
}
.cta-offer {
padding: 20px 0 10px 0;
font-weight: bold;
font-family: Arial, sans-serif;
margin: 20px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 200px;
color: #ffd700;
}
.cta-offer p {
font-size: 29px;
color: #fff;
margin: 0;
padding: 0 10px;
}
.price {
color: #fff;
font-size: 32px;
font-weight: bold;
}
.discount {
font-size: 29px;
color: #f39c12;
text-decoration: line-through;
margin-left: 50px;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}
.cta-button {
background-color: orange;
text-decoration: none;
padding: 15px 30px;
border-radius: 50px;
font-size: 18px;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.3s ease;
color: white;
border: none;
cursor: pointer;
}
.cta-button:hover {
transform: scale(1.1);
}
.cta-button.primary {
background-color: #3498db;
color: #ffffff;
}
.cta-button.primary:hover {
background-color: #f39c12;
}
.cta-button.secondary {
background-color: #ecf0f1;
color: #2c3e50;
}
.cta-button.secondary:hover {
background-color: #f39c12;
color: #ffffff;
}
@media (max-width: 600px) {
.cta-container2 {
background: rgba(0, 0, 0, 0.7);
border-radius: 0;
}
.cta-content {
padding: 20px;
}
.cta-container2 h2 {
margin-top: -20px;
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(51, 9, 121, 1) 100%, rgba(0, 212, 255, 1) 100%);
box-shadow: none;
font-size: 1.5rem;
padding: 10px;
border-radius: 0;
}
.cta-subtitle {
font-size: 18px;
margin-top: 15px;
margin-bottom: 15px;
}
.cta-description {
font-size: 16px;
line-height: 1.4;
}
.cta-offer {
margin: 15px 0;
padding: 10px;
font-size: 15px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.3);
}
.cta-offer p {
font-size: 22px;
}
.price {
font-size: 20px;
margin-bottom: 8px;
}
.discount {
font-size: 18px;
margin-left: 10px;
}
.cta-buttons {
flex-direction: column;
gap: 15px;
align-items: stretch;
margin-top: 15px;
}
.cta-button {
width: 100%;
padding: 12px 20px;
font-size: 16px;
box-sizing: border-box;
}
}
.faq-item {
padding-left: 5px;
margin-bottom: 15px;
border-bottom: 3px solid #ddd;
}
summary {
padding: 20px;
background-color: #f9f9f9;
cursor: pointer;
font-size: 1.2em;
position: relative;
list-style: none;
font-weight: bold;
letter-spacing: 0.7px;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
content: '+';
font-size: 1.5em;
position: absolute;
right: 20px;
color: #666;
transition: transform 0.3s ease;
}
details[open] summary::after {
transform: rotate(45deg);
}
.faq-item p {
padding: 30px;
background-color: #fff;
margin: 0;
font-size: 1.03em;
color: #000;
line-height: 35px;
}
footer {
border-top: #33006d 5px solid !important;
}
* {
box-sizing: border-box;
}
.hero-section {
z-index: 9;
border-bottom: 4px solid #ccc;
padding-bottom: 24px;
padding-top: 15px;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: -20px;
margin-bottom: 20px;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://tarots.online/wp-content/uploads/2024/10/fondotarot.webp');
background-repeat: repeat;
background-size: auto;
background-position: top center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.84);
z-index: -1;
}
.hero-section .container {
width: 100vw;
margin-bottom: -80px;
}
.hero-section .col-md-12 p {
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
color: white !important;
font-size: 1.65rem;
font-weight: 700;
line-height: 2;
text-align: center !important;
letter-spacing: 2px;
padding-bottom: 40px;
padding-right: 0px;
padding-top: 20px;
margin-bottom: -10px !important;
margin-left: 100px;
border: none;
box-shadow: none;
text-align: left;
background: linear-gradient(90deg, #ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
text-fill-color: transparent;
opacity: 0;
filter: blur(3px);
animation: appearMystic 2.5s ease-out forwards;
}
.hero-section .container3 {
max-width: 1400px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0 auto;
margin-top: -30px;
padding-top: 20px;
padding-left: 120px;
padding-right: 120px;
gap: 10px;
}
.hero-section .text-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 50%;
margin-left: 20px;
}
.hero-section .image-section {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
}
.hero-section .image-section img {
box-shadow: 4px 8px 6px rgba(0, 0, 0, 0.6);
border: 3px solid #fff;
width: 100%;
max-width: 450px;
height: auto;
margin-bottom: -40px;
border-radius: 20px;
padding: 4px;
}
.hero-section .text-section p {
font-size: 18px;
text-align: left !important;
color: white;
}
.hero-section .button-group {
padding-top: 14px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
gap: 10px;
}
.hero-section .cta-button {
background: linear-gradient(to bottom, #4A148C, #3A0D4F) !important;
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
color: white;
border: 2px solid rgba(255, 255, 255, 0.);
padding: 20px 25px;
font-size: 18px;
cursor: pointer;
border-radius: 20px;
width: 100%;
max-width: 450px;
letter-spacing: 0px;
line-height: 20px;
height: 80px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3), 0px 3px 3px rgba(255, 255, 255, 0.2);
position: relative;
text-transform: none;
}
.hero-section .cta-button.secondary {
background-color: #5f009c !important;
}
.hero-section .cta-button.secondary:hover {
background-color: orange !important;
}
.hero-section .image-section2 {
padding: 40px 0 0 0;
width: 40%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.hero-section .image-section2 img {
box-shadow: 4px 8px 6px rgba(0, 0, 0, 0.6);
border: 5px solid #fff;
width: 100%;
padding: 1px;
display: block;
height: auto;
}
.hero-section .image-section2 .article-loop a,
.hero-section .image-section2 a.asap-clusters-cats span {
display: block;
background: white;
border-radius: 0;
border: none;
cursor: pointer;
transition: transform 0.2s ease;
margin: 0 15px 50px 15px;
padding-bottom: 1px;
box-shadow: 0 2px 1px rgba(20, 20, 50, 0.1),
0 7px 6px rgba(50, 20, 70, 0.3),
0 2px 4px rgba(10, 10, 30, 0.2);
text-decoration: none;
}
.hero-section .image-section2 .article-loop a:hover,
.hero-section .image-section2 a.asap-clusters-cats span:hover {
transform: scale(1.05);
}
.hero-section .image-section2 .article-loop img {
border: 1px solid #000000;
border-radius: 0;
display: block;
max-width: 100%;
height: auto;
}
.hero-section .image-section2 .article-content {
box-shadow: 0 2px 1px rgba(20, 20, 50, 0.1),
0 7px 6px rgba(50, 20, 70, 0.3),
0 2px 4px rgba(10, 10, 30, 0.2);
display: block;
margin-bottom: 17px;
position: relative;
text-align: center;
margin-top: 0;
padding: 10px 0;
}
.hero-section .image-section2 .entry-title {
color: #000;
letter-spacing: 0.5px;
text-shadow: 0.25px 0.25px 0px rgba(128, 0, 128, 0.5),
-0.25px 0.25px 0px rgba(128, 0, 128, 0.5),
0.25px -0.25px 0px rgba(128, 0, 128, 0.5),
-0.25px -0.25px 0px rgba(128, 0, 128, 0.5);
font-size: 1.1rem;
line-height: 1.3;
}
.espaciobajo {
margin-top: 0px !important;
}
@media screen and (max-width: 768px) {
.espaciobajo {
margin-top: 15px !important;
}
.espacio {
margin-bottom: -5px !important;
}
.hero-section {
padding: 0 !important;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.89);
z-index: -1;
}
.hero-section .image-section img {
box-shadow: 4px 8px 6px rgba(0, 0, 0, 0.6);
border: 3px solid #fff;
width: 100%;
max-width: 250px;
height: auto;
border-radius: 20px;
padding: 4px;
}
.hero-section .text-section h1 {
padding-top: 26px !important;
border-bottom: 2px solid #ddd;
font-size: 24px !important;
text-align: center !important;
font-weight: bold;
border-radius: 5px;
line-height: 1.9;
letter-spacing: 1.6px;
padding-bottom: 10px;
margin-top: -25px;
margin-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
box-shadow: none;
background-color: transparent;
width: 100%;
position: static;
left: auto;
transform: none;
}
.hero-section .col-md-12 p {
margin-top: 30px;
margin-bottom: -20px !important;
font-size: 20px !important;
color: #feefe3 !important;
padding-left: 10px;
margin-left: 0px;
margin-right: 10px;
}
.hero-section .image-section2 {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
width: 0 !important;
}
.hero-section .container3 {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 !important;
padding-top: 0px !important;
padding-bottom: 20px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
z-index: 1;
margin-top: -50px !important;
}
.hero-section .text-section {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
padding: 0 16px !important;
margin-left: 0;
box-sizing: border-box;
overflow-wrap: break-word;
word-break: break-word;
}
.hero-section>h1 {
font-size: 25px !important;
font-weight: bold;
text-align: center !important;
padding-bottom: 15px;
margin-bottom: 12px;
padding-top: 0;
margin-top: 3px;
border-bottom: 1px solid #7e7e7e;
width: 100%;
}
.hero-section .text-section p {
font-size: 16px;
margin-bottom: 0px;
text-align: left;
width: 100%;
}
.hero-section .button-group {
padding-top: 14px;
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
}
.hero-section .cta-button {
border: none;
background: orange;
padding: 13px 20px;
font-size: 15px;
cursor: pointer;
border-radius: 20px;
transition: background-color 0.3s ease;
width: 100%;
height: 100% !important;
max-width: none !important;
}
}
.full-width-container {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
padding: 25px 70px 15px 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
box-sizing: border-box;
}
@media (max-width: 768px) {
.full-width-container {
all: unset;
}
}
.su-service {
font-size: 18px;
padding: 5px;
letter-spacing: 0.2px;
}
.su-service-content {
line-height: 1.6;
}
.ctallamada {
letter-spacing: 0.8px;
box-shadow: 0 2px 1px rgba(20, 20, 50, 0.1),
0 7px 6px rgba(50, 20, 70, 0.3),
0 2px 4px rgba(10, 10, 30, 0.2);
display: inline-block;
background-color: #ff0000;
color: #ffffff;
font-size: 22px;
padding: 10px 20px;
border: none;
border-radius: 5px;
text-align: center;
text-decoration: none;
transition: transform 0.3s ease, background-color 0.3s ease;
cursor: pointer;
}
.ctallamada:hover {
background-color: #111111;
color: #ffffff;
transform: scale(1.1);
text-decoration: none;
}
.jfaq--title {
padding: 0;
}
.jfaq--answer-content {
padding: 20px;
}
.article-loop a,
a.asap-clusters-cats span {
display: block;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(4, 0, 128, 0.1) 100%);
border-radius: 0px;
border: none;
cursor: pointer;
transition: transform 0.2s ease;
margin: 15px 15px 15px 15px;
padding-bottom: 1px;
box-shadow: 0 2px 1px rgba(20, 20, 50, 0.1),
0 7px 6px rgba(50, 20, 70, 0.3),
0 2px 4px rgba(10, 10, 30, 0.2);
text-decoration: none;
color: inherit;
}
.article-loop a:hover,
a.asap-clusters-cats span:hover {
transform: scale(1.04);
}
.article-loop img {
border: 1px solid #000000;
border-radius: 0;
display: block;
max-width: 100%;
height: auto;
}
.article-content {
box-shadow: 0 2px 1px rgba(20, 20, 50, 0.1),
0 7px 6px rgba(50, 20, 70, 0.3),
0 2px 4px rgba(10, 10, 30, 0.2);
display: block;
margin-bottom: 15px;
position: relative;
text-align: center;
}
.entry-title {
color: #000;
letter-spacing: 0.5px;
text-shadow: 0.25px 0.25px 0px rgba(128, 0, 128, 0.5),
-0.25px 0.25px 0px rgba(128, 0, 128, 0.5),
0.25px -0.25px 0px rgba(128, 0, 128, 0.5),
-0.25px -0.25px 0px rgba(128, 0, 128, 0.5);
font-size: 1.2rem;
padding: 10px 5px;
line-height: 1.3;
}
.article-loop a:hover .entry-title,
a.asap-clusters-cats span:hover .entry-title {
color: purple;
}
.article-loop {
padding: 0 0.225rem;
}
.botonnormal:hover {
color: #ffffff;
transform: scale(1.1);
}
#custom-tarot-table-container {
margin: 20px auto 0 auto;
max-width: 100%;
width: 100%;
overflow-x: auto;
padding: 0;
box-shadow: 8px 2px 5px rgba(0, 50, 50, 0.2), 0 2px 3px rgba(0, 50, 50, 0.3);
}
#custom-tarot-table {
width: 100%;
border-collapse: collapse;
text-align: center;
border: 2px solid #b28dff;
table-layout: auto;
}
#custom-tarot-table th,
#custom-tarot-table td {
font-size: 18px;
padding: 10px;
border: 1px solid #b28dff;
word-wrap: break-word;
overflow-wrap: break-word;
text-align: center;
vertical-align: middle;
}
#custom-tarot-table th {
background-color: #f8edff;
color: #5400b3;
font-weight: bold;
border-bottom: 3px solid #b28dff;
}
#custom-tarot-table td[colspan="3"] {
box-shadow: 7px 1px 12px rgba(0, 50, 50, 0.2), 0 2px 3px rgba(0, 50, 50, 0.3);
background-color: #fff;
font-size: 18px;
text-align: justify;
padding: 20px;
line-height: 1.7;
}
#custom-tarot-table td[colspan="2"] {
background-color: #f9f6ff;
font-size: 18px;
text-align: justify;
padding: 15px;
line-height: 1.6;
}
@media (max-width: 768px) {
#custom-tarot-table-container {
margin: 0 !important;
width: 100% !important;
padding: 0 !important;
}
#custom-tarot-table {
width: 100% !important;
table-layout: fixed !important;
}
#custom-tarot-table th,
#custom-tarot-table td {
font-size: 12px !important;
padding: 8px !important;
}
#custom-tarot-table td[colspan="3"] {
font-size: 11px !important;
padding: 10px !important;
}
}
#custom-tarot-table td b {
font-weight: bold;
}
#custom-tarot-table td {
font-weight: normal !important;
}
.tip {
display: flex;
align-items: center;
justify-content: flex-start;
background: #fdfdfd;
padding: 7px 22px 7px 12px;
box-shadow: 7px 1px 12px rgba(0, 50, 50, 0.2), 0 2px 3px rgba(0, 50, 50, 0.3);
border-radius: 12px;
margin-bottom: 10px;
}
.tip-image {
flex-shrink: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: #FFFFFF;
border-radius: 50%;
margin-left: 10px;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.tip-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.tip-text {
flex-grow: 1;
text-align: left;
color: #333;
margin-top: 0;
padding-left: 15px;
}
@media (max-width: 768px) {
.tip {
padding: 10px;
flex-direction: column;
text-align: center;
}
.tip-image {
margin-left: 0;
margin-bottom: 10px;
width: 60px;
height: 60px;
}
.tip-text {
text-align: center;
padding-left: 0;
}
.tip-text p {
font-size: 0.9rem;
line-height: 1.5;
padding-left: 0;
margin: 0;
}
}
.h2-fake {
color: #FFFFFF;
padding: 10px 0 1px 0;
background: transparent;
box-shadow: 0 6px 6px rgba(0, 0, 120, .5), 0 22px 3px rgba(0, 0, 120, .1);
text-align: center;
border-bottom: #000000 2px solid;
font-size: 36px;
border-radius: 5px;
font-weight: bold;
letter-spacing: 0.9px;
}
.h3-fake {
color: orange;
padding: 0;
font-size: 30px;
font-weight: bold;
letter-spacing: 0.3px;
text-align: center;
}
.tarot-container {
background: transparent;
color: #fff;
text-align: center;
padding: 25px 20px 30px 20px;
border-radius: 10px;
max-width: 700px;
margin: 40px auto 0 auto;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}
.tarot-container .form-grid {
padding: 30px 10px 20px 10px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
text-align: center;
}
.tarot-container input {
width: 100%;
padding: 15px;
margin: 10px 0;
border: 1px solid #555;
border-radius: 5px;
background: #f0f0f0;
color: black;
text-align: center;
box-sizing: border-box;
}
.tarot-container button {
text-transform: none;
background: #e18b07;
border: none;
padding: 10px 15px;
color: white;
border-radius: 5px;
cursor: pointer;
width: 100%;
font-size: 22px;
font-weight: bold;
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
}
.tarot-container button:hover {
transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
background-color: #c87a06;
}
.loader {
display: none;
border: 3px solid white;
border-top-color: transparent;
border-radius: 50%;
width: 18px;
height: 18px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#mensaje-confirmacion {
font-size: 20px;
color: white;
display: none;
text-align: center;
font-family: "Papyrus", "Comic Sans MS", cursive;
font-weight: bold;
opacity: 0;
transition: opacity 1s ease-in-out;
min-height: 50px;
padding: 10px 0;
}
#tirada-tarot {
display: none;
opacity: 0;
transition: opacity 7s ease-in-out;
width: 100%;
}
#formulario-tarot {
transition: opacity 2s ease-in-out, height 2s ease-in-out;
min-height: 350px;
overflow: hidden;
}
#contenedor-tarot {
width: 100%;
max-width: 1200px;
min-height: 800px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
transition: min-height 0.5s ease-in-out;
margin-bottom: -45px;
margin-left: auto;
margin-right: auto;
}
.mensaje-compatibilidad {
font-size: 28px;
color: #d32f2f;
font-weight: bold;
text-align: center;
transition: opacity 4s ease-in-out, visibility 0s linear 4s;
min-height: 50px;
padding: 10px 20px;
visibility: hidden;
opacity: 0;
box-sizing: border-box;
}
.tarot-dia-gitano-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 20px;
position: relative;
transition: height 2s ease-in-out, opacity 2s ease-in-out;
box-sizing: border-box;
}
.tarot-dia-gitano-card {
width: 100px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 1.5s ease-in-out, opacity 2s ease-in-out;
cursor: pointer;
flex-shrink: 0;
}
.tarot-dia-gitano-card .front,
.tarot-dia-gitano-card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
overflow: hidden;
}
.tarot-dia-gitano-card .back img,
.tarot-dia-gitano-card .front img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tarot-dia-gitano-card .front {
transform: rotateY(180deg);
border: 1px solid #000;
}
.selected-card {
transform: scale(1.5) translateZ(50px);
z-index: 10;
}
.flipped {
transform: rotateY(180deg) scale(1.5) translateZ(50px);
}
.tarot-dia-gitano-card.hidden {
opacity: 0;
pointer-events: none;
}
.tarot-dia-gitano-card.hidden-final {
display: none;
}
.tarot-dia-gitano-container.hidden {
height: 0;
opacity: 0;
overflow: hidden;
padding: 0;
margin: 0;
border: none;
}
#tarot-dia-gitano-result {
width: 100%;
max-width: 1180px;
margin: 20px auto;
text-align: left;
padding: 20px;
border-radius: 10px;
background: #f9f9f9;
transition: opacity 2s ease-in-out, transform 2s ease-in-out;
transform: translateY(20px);
opacity: 0;
box-sizing: border-box;
}
#tarot-dia-gitano-result.show {
opacity: 1;
transform: translateY(0);
}
#tarot-dia-gitano-result img {
display: block;
margin: 0 auto 15px auto;
float: none;
max-width: 300px;
width: 80%;
height: auto;
border-radius: 5px;
}
#tarot-dia-gitano-result .tarot-text {
font-size: 16px;
padding: 0;
line-height: 1.6;
}
#tarot-dia-gitano-result .tarot-text ol,
#tarot-dia-gitano-result .tarot-text ul {
font-size: 1em;
letter-spacing: normal;
padding-left: 20px;
margin-bottom: 1em;
}
#tarot-dia-gitano-result .tarot-text h3 {
color: #172155;
padding: 10px 0;
font-size: 28px;
font-weight: bold;
letter-spacing: normal;
margin: 15px 0 10px 0;
}
@media screen and (max-width: 768px) {
.h2-fake {
box-shadow: none;
font-size: 28px;
padding: 8px 0;
}
.h3-fake {
font-size: 22px;
}
.tarot-container {
max-width: 95%;
padding: 15px 10px;
}
.tarot-container .form-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.tarot-container input {
padding: 12px;
font-size: 15px;
}
.tarot-container button {
font-size: 18px;
padding: 10px 12px;
width: 100%;
}
#mensaje-confirmacion {
padding: 0 5px;
font-size: 16px;
font-family: inherit;
font-weight: normal;
min-height: 50px;
}
#formulario-tarot {
min-height: auto;
}
#contenedor-tarot {
min-height: auto;
margin-bottom: 0;
}
.mensaje-compatibilidad {
margin-top: -15px;
font-size: 18px;
padding: 5px 10px;
min-height: 40px;
}
.tarot-dia-gitano-container {
max-width: 100%;
padding: 15px 10px;
gap: 5px;
}
.tarot-dia-gitano-card {
width: 70px;
height: 120px;
}
#tarot-dia-gitano-result {
padding: 15px;
}
#tarot-dia-gitano-result img {
max-width: 200px;
width: 70%;
}
#tarot-dia-gitano-result p {
font-size: 14px;
}
#tarot-dia-gitano-result .tarot-text ol,
#tarot-dia-gitano-result .tarot-text ul {
font-size: 0.95em;
}
#tarot-dia-gitano-result .tarot-text h3 {
font-size: 22px;
}
}
.snippet-wrapper {
width: 100%;
margin-right: 0px;
margin-top: 20px;
margin-bottom: 20px;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.snippet-wrapper {
max-width: none;
padding-left: 15px;
padding-right: 15px;
margin-top: -25px;
margin-bottom: 15px;
}
.tabla-desplazable-mensaje {
display: none;
width: 100%;
box-sizing: border-box;
padding: 10px 15px;
margin-bottom: 10px;
background-color: #e6f7ff;
color: #004085;
border: 1px solid #b8daff;
border-radius: 5px;
text-align: center;
font-size: 0.9em;
font-weight: 500;
line-height: 1;
white-space: normal;
}
}
@media (min-width: 769px) {
.tabla-desplazable-mensaje {
display: none !important;
}
}
.mystic-rating-stars-container {
display: flex;
align-items: center;
position: relative;
margin-bottom: 15px;
}
.mystic-stars-wrapper {
display: flex;
position: relative;
}
.mystic-star {
font-size: 15px;
position: relative;
z-index: 1;
line-height: 1;
display: inline-block;
}
.mystic-star.full .star-glyph,
.mystic-star.half .star-fill-glyph {
color: #FFD700;
text-shadow: 0 0 1.5px rgba(255, 230, 180, 0.3);
}
.mystic-star.half .star-empty-bg-glyph,
.mystic-star.empty .star-glyph {
color: #4a4158;
opacity: 0.6;
text-shadow: 0 0 1px rgba(100, 80, 130, 0.15);
}
.mystic-star:not(.is-last-star).full .star-glyph,
.mystic-star:not(.is-last-star).half .star-fill-glyph {
animation: starTwinkleRandom 5s infinite;
}
.mystic-stars-wrapper .mystic-star.star-index-0:not(.is-last-star).full .star-glyph,
.mystic-stars-wrapper .mystic-star.star-index-0:not(.is-last-star).half .star-fill-glyph {
animation-delay: -0.2s;
animation-duration: 4.8s;
}
.mystic-stars-wrapper .mystic-star.star-index-1:not(.is-last-star).full .star-glyph,
.mystic-stars-wrapper .mystic-star.star-index-1:not(.is-last-star).half .star-fill-glyph {
animation-delay: -1.5s;
animation-duration: 5.2s;
}
.mystic-stars-wrapper .mystic-star.star-index-2:not(.is-last-star).full .star-glyph,
.mystic-stars-wrapper .mystic-star.star-index-2:not(.is-last-star).half .star-fill-glyph {
animation-delay: -0.8s;
animation-duration: 4.9s;
}
.mystic-stars-wrapper .mystic-star.star-index-3:not(.is-last-star).full .star-glyph,
.mystic-stars-wrapper .mystic-star.star-index-3:not(.is-last-star).half .star-fill-glyph {
animation-delay: -2.1s;
animation-duration: 5.1s;
}
.mystic-star.half .star-fill-clipper {
position: absolute;
left: 0;
top: 0;
width: var(--half-star-fill, 50%);
overflow: hidden;
height: 100%;
}
.mystic-star.half .star-fill-glyph {
display: block;
}
@keyframes starTwinkleRandom {
0%,
85%,
100% {
text-shadow: 0 0 1.5px rgba(255, 230, 180, 0.3);
transform: scale(1);
opacity: 1;
}
90% {
text-shadow:
0 0 1px rgba(255, 255, 220, 0.9),
0 0 3px rgba(255, 240, 200, 0.8),
0 0 7px rgba(255, 225, 150, 0.7),
0 0 12px rgba(255, 210, 100, 0.5);
transform: scale(1.04);
opacity: 1;
}
}
@keyframes mysticAuraPulse {
from {
opacity: 0.5;
transform: scale(0.95);
}
to {
opacity: 0.7;
transform: scale(1.05);
}
}
.mystic-rating-text {
font-weight: bold;
font-size: 15px;
padding-left: 5px;
margin-left: 5px;
letter-spacing: 0.4px;
color: #ffffff;
text-shadow: 0 0 6px rgba(255, 220, 150, 0.4), 0 0 12px rgba(255, 255, 25, 0.9);
position: relative;
z-index: 1;
}
.hero-section .mystic-rating-text {
color: #f0eaff;
}
.mystic-rating-stars-container>.particle {
position: absolute;
border-radius: 50%;
background-color: rgba(220, 180, 255, 0.5);
opacity: 0;
animation: floatSingleParticle 6s infinite ease-in-out;
pointer-events: none;
z-index: 2;
}
.mystic-rating-stars-container>.particle.particle-1 {
width: 3px;
height: 3px;
top: -8px;
left: 15%;
animation-delay: -1s;
--particle-x1: -7px;
--particle-y1: 4px;
--particle-x2: 3px;
--particle-y2: -6px;
}
.mystic-rating-stars-container>.particle.particle-2 {
width: 2px;
height: 2px;
bottom: -5px;
right: 25%;
animation-delay: -3.5s;
--particle-x1: 6px;
--particle-y1: -3px;
--particle-x2: -4px;
--particle-y2: 5px;
}
.mystic-rating-stars-container>.particle.particle-3 {
width: 3px;
height: 3px;
top: 50%;
left: -15px;
transform: translateY(-50%);
animation-delay: -5s;
--particle-x1: 4px;
--particle-y1: 6px;
--particle-x2: -5px;
--particle-y2: -2px;
}
@keyframes floatSingleParticle {
0% {
opacity: 0;
transform: translateY(5px) scale(0.5);
}
20% {
opacity: 0.7;
transform: translateY(var(--particle-y1, -5px)) translateX(var(--particle-x1, 5px)) scale(1.1);
}
80% {
opacity: 0.6;
transform: translateY(var(--particle-y2, 3px)) translateX(var(--particle-x2, -3px)) scale(0.9);
}
100% {
opacity: 0;
transform: translateY(5px) scale(0.5);
}
}
@media (max-width: 600px) {
.mystic-star {
font-size: 20px;
margin-right: 1px;
}
.mystic-rating-text {
font-size: 12px;
margin-left: 8px;
}
.mystic-rating-stars-container {
padding-bottom: 8px;
}
.mystic-rating-stars-container>.particle {
display: none;
}
.asap-toc-widget .post-index .checkbox .check-table,
.the-content .post-index .checkbox .check-table {
position: absolute;
transition: 0.2s;
margin-top: 0px;
height: 26px;
width: 26px;
margin-left: 0px;
}
}
#index-table {
text-align: left;
}
.post-index {
background: #f9f7fc;
border: 0px solid #2c1e3e !important;
border-radius: 12px;
padding: 5px 20px 20px 15px !important;
margin-top: 25px;
margin-bottom: 10px;
position: relative;
box-shadow: 0 5px 15px rgba(100, 80, 120, 0.1),
0 0 8px rgba(180, 150, 220, 0.9);
opacity: 1;
transform: none;
}
@media (max-width: 600px) {
.post-index {
background: #f9f7fc;
border: 0px solid #2c1e3e !important;
border-radius: 12px;
padding: 20px 20px 20px 45px !important;
margin-top: 25px;
margin-bottom: 10px;
position: relative;
box-shadow: 0 5px 15px rgba(100, 80, 120, 0.9),
0 0 8px rgba(180, 150, 220, 0.9);
opacity: 1;
transform: none;
}
.post-index>span:first-child {
display: block;
font-family: fantasy, 'Cinzel Decorative', serif;
color: #4a0e6c;
line-height: 1.2;
padding-top: 20px;
font-size: 1.7rem;
font-weight: 700;
text-align: center;
letter-spacing: 2px;
text-shadow: 1px 1px 2px rgba(220, 180, 255, 0.3);
position: relative;
z-index: 1;
background: linear-gradient(90deg, #7b1fa2, #9c27b0, #7b1fa2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
}
.post-index .toc-title {
display: block;
padding-top: 15px;
font-family: fantasy, 'Cinzel Decorative', serif;
color: #4a0e6c;
line-height: 1.2;
font-size: 1.7rem!important;
font-weight: 700;
text-align: center;
letter-spacing: 2px;
text-shadow: 1px 1px 2px rgba(220, 180, 255, 0.3);
position: relative;
z-index: 1;
background: linear-gradient(90deg, #7b1fa2, #9c27b0, #7b1fa2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.post-index>span:first-child::before {
content: "📜 ";
}
.post-index .btn-show {
position: absolute;
top: -5px !important;
right: -30px;
cursor: pointer;
z-index: 2;
background: none !important;
border: none !important;
padding: 0 !important;
position: relative;
width: auto;
height: auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.post-index .btn-show::before,
.post-index .btn-show::after {
content: '';
position: absolute;
top: 80%;
left: 50%;
width: 4px;
height: 4px;
background: #ff8c00;
border-radius: 50%;
box-shadow: 0 0 5px 1px #ff8c00, 0 0 9px 2px #ffa500, 0 0 14px 3px #ffd700;
opacity: 0;
animation: mysticOrbitParticle 16s infinite ease-in-out;
pointer-events: none;
}
.post-index .btn-show::before {
animation-delay: 0s;
animation-duration: 5.5s;
}
.post-index .btn-show::after {
width: 2px;
height: 2px;
animation-name: mysticOrbitParticleAlt;
animation-delay: -2.5s;
animation-duration: 6.2s;
}
@keyframes mysticOrbitParticle {
0%,
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.5) rotate(0deg) translateX(15px) rotate(0deg);
}
25% {
opacity: 0.9;
transform: translate(-50%, -50%) scale(1) rotate(90deg) translateX(20px) rotate(-90deg);
}
50% {
opacity: 0.7;
transform: translate(-50%, -50%) scale(0.8) rotate(180deg) translateX(18px) rotate(-180deg);
}
75% {
opacity: 0.9;
transform: translate(-50%, -50%) scale(1.1) rotate(270deg) translateX(22px) rotate(-270deg);
}
}
@keyframes mysticOrbitParticleAlt {
0%,
100% {
opacity: 0.1;
transform: translate(-50%, -50%) scale(0.4) rotate(0deg) translateX(18px) rotate(0deg);
}
25% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(0.9) rotate(-120deg) translateX(22px) rotate(120deg);
}
50% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(0.7) rotate(-240deg) translateX(15px) rotate(240deg);
}
75% {
opacity: 0.9;
transform: translate(-50%, -50%) scale(1) rotate(-360deg) translateX(20px) rotate(360deg);
}
}
.post-index .btn-show .label.checkbox {
display: inline-block;
padding: 5px;
position: relative;
z-index: 1;
}
.post-index .btn-show .check-table svg {
width: 42px;
height: 42px;
top: 8px;
fill: #000000;
transition: transform 0.3s ease, fill 0.3s ease;
filter: drop-shadow(0 0 3px rgba(123, 74, 155, 0.3));
position: relative;
z-index: 1;
}
.post-index .btn-show:hover .check-table svg {
fill: #5e3370;
}
.post-index label.checkbox input[type="checkbox"]:checked~.check-table svg {
transform: rotate(180deg);
}
.post-index ul#index-table {
list-style: none;
margin-top: 10px;
transition: max-height 0.5s ease-out, opacity 0.4s ease-out;
}
.post-index ul#index-table li {
margin-bottom: 8px;
padding-left: 25px;
position: relative;
opacity: 1;
transform: none;
}
.post-index ul#index-table li::before {
content: '✧';
position: absolute;
left: 0px;
top: -1px;
font-size: 1.2em;
color: #9b59b6;
text-shadow: 0 0 4px rgba(155, 89, 182, 0.5);
transition: transform 0.3s ease, color 0.3s ease;
}
.post-index ul#index-table li a {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 1rem;
font-weight: 400;
color: #5a3a73;
text-decoration: none;
line-height: 1.4;
transition: color 0.3s ease, text-shadow 0.3s ease;
display: inline-block;
}
.post-index ul#index-table li:hover::before {
color: #bf8eda;
transform: scale(1.3) rotate(15deg);
}
.post-index ul#index-table li a:hover {
color: #8e44ad;
text-shadow: 0 0 5px rgba(142, 68, 173, 0.3);
}
.post-index ul#index-table ul {
padding-left: 20px;
margin-top: 6px;
list-style: none;
}
.post-index ul#index-table ul li {
font-size: 0.9em;
}
.post-index ul#index-table ul li::before {
content: '▹';
font-size: 1em;
color: #a970c4;
}
@media (max-width: 767px) {
.post-index ul#index-table {
margin-left: -35px;
list-style: none;
margin-top: 22px;
transition: max-height 0.5s ease-out, opacity 0.4s ease-out;
}
.post-index {
padding: 35px 15px 15px 15px;
}
.post-index .toc-title
{
font-size: 1.5rem!important;
}
.post-index .btn-show {
top: -6px;
}
.post-index .btn-show .check-table svg {
width: 20px;
height: 20px;
}
.post-index ul#index-table li a {
font-size: 0.9rem;
}
.the-content .post-index span,
.des-category .post-index span {
font-size: 14px;
padding-bottom: 10px;
padding-top: 22px;
}
}
.hero-section .container3 .image-section {
position: relative;
z-index: 4
}
.hero-section .container3::before {
content: "";
position: absolute;
inset: 0;
width: 2px;
height: 2px;
border-radius: 50%;
background: transparent;
pointer-events: none;
z-index: 6;
box-shadow: -25vw -16vh 0 0 rgba(255, 255, 255, .55), -11vw 10vh 0 1px rgba(255, 255, 255, .48), 3vw -10vh 0 2px rgba(255, 255, 255, .60), 12vw 22vh 0 0 rgba(255, 255, 255, .5), 24vw -12vh 0 1px rgba(255, 255, 255, .46), 34vw 8vh 0 0 rgba(255, 255, 255, .5), -16vw 24vh 0 2px rgba(255, 255, 255, .52), 7vw 30vh 0 1px rgba(255, 255, 255, .54), 30vw 22vh 0 0 rgba(255, 255, 255, .45), -14vw -30vh 0 1px rgba(255, 255, 255, .5), 15vw -25vh 0 0 rgba(255, 255, 255, .47);
filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55));
animation: drift-slow 90s ease-in-out infinite alternate, twinkle 13s linear infinite
}
.hero-section .container3::after {
content: "";
position: absolute;
inset: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: transparent;
pointer-events: none;
z-index: 1;
box-shadow: -18vw -8vh 0 0 #d9c5ff, 8vw -22vh 0 0 #ffda8a, 24vw 10vh 0 1px rgba(255, 255, 255, .9), -26vw 18vh 0 0 #ffb84d, 34vw -4vh 0 1px rgba(255, 255, 255, .92), 2vw -18vh 0 0 #f5e7b2;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, .75)) drop-shadow(0 0 10px rgba(255, 255, 255, .6));
animation: accent-drift 80s linear infinite, accent-blink 6s ease-in-out infinite;
animation-delay: -2.7s;
}
.hero-section .container3 .image-section .particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 7;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, .65))
}
.hero-section .container3 .image-section .particle-1 {
width: 4px;
height: 4px;
top: 20%;
left: 15%;
background: #ffda8a;
animation: random-move-1 18s ease-in-out infinite alternate, particle-blink 5s linear infinite -1s
}
.hero-section .container3 .image-section .particle-2 {
width: 3px;
height: 3px;
top: 60%;
left: 80%;
background: #d9c5ff;
animation: random-move-2 22s ease-in-out infinite alternate -3s, particle-blink 6.5s linear infinite -2.5s
}
.hero-section .container3 .image-section .particle-3 {
width: 5px;
height: 5px;
top: 40%;
left: 45%;
background: #f5e7b2;
animation: random-move-3 15s ease-in-out infinite alternate -5s, particle-blink 4s linear infinite
}
.hero-section .container3 .text-section {
position: relative;
z-index: 1
}
.hero-section .container3 .text-section::before {
content: "";
position: absolute;
top: 6%;
left: 80%;
width: 5px;
height: 5px;
border-radius: 50%;
background: #ffda8a;
box-shadow: 0 0 6px rgba(255, 208, 138, .75);
pointer-events: none;
z-index: -1;
opacity: .55;
animation: mystic-orbit 30s linear infinite
}
@keyframes drift-slow {
0% {
transform: translate(0)
}
100% {
transform: translate(-4vw, 3vh)
}
}
@keyframes accent-drift {
0% {
transform: translate(0)
}
100% {
transform: translate(72.5vw, 11.4vh)
}
}
@keyframes accent-blink {
0%,
100% {
opacity: .25
}
45% {
opacity: .9
}
}
@keyframes twinkle {
0%,
30%,
100% {
opacity: .3
}
15%,
45% {
opacity: .8
}
60%,
75% {
opacity: .5
}
}
@keyframes random-move-1 {
0% {
transform: translate(0)
}
50% {
transform: translate(5vw, -4vh)
}
100% {
transform: translate(0)
}
}
@keyframes random-move-2 {
0% {
transform: translate(0)
}
50% {
transform: translate(-6vw, 5vh)
}
100% {
transform: translate(0)
}
}
@keyframes random-move-3 {
0% {
transform: translate(0)
}
50% {
transform: translate(4vw, -6vh)
}
100% {
transform: translate(0)
}
}
@keyframes particle-blink {
0%,
100% {
opacity: .3
}
50% {
opacity: .9
}
25%,
75% {
opacity: .6
}
}
@keyframes mystic-orbit {
0% {
transform: translate(0) rotate(0)
}
100% {
transform: translate(14px, -8px) rotate(360deg)
}
}
@media (prefers-reduced-motion:reduce) {
.hero-section .container3::before,
.hero-section .container3::after,
.hero-section .container3 .image-section .particle,
.hero-section .container3 .text-section::before {
animation: none !important
}
}
.custom-row {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}
.custom-column {
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
word-wrap: break-word;
}
.custom-column.col-1-1 {
flex: 0 0 100%;
max-width: 100%;
}
.custom-column.col-1-2 {
flex: 0 0 50%;
max-width: 50%;
}
.custom-column.col-1-3 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.custom-column.col-1-4 {
flex: 0 0 25%;
max-width: 25%;
}
.custom-column.col-1-5 {
flex: 0 0 20%;
max-width: 20%;
}
.custom-column.col-1-6 {
flex: 0 0 16.666666%;
max-width: 16.666666%;
}
.custom-column.col-2-3 {
flex: 0 0 66.666666%;
max-width: 66.666666%;
}
.custom-column.col-3-4 {
flex: 0 0 75%;
max-width: 75%;
}
.custom-column.col-2-5 {
flex: 0 0 40%;
max-width: 40%;
}
.custom-column.col-3-5 {
flex: 0 0 60%;
max-width: 60%;
}
.custom-column.col-4-5 {
flex: 0 0 80%;
max-width: 80%;
}
.custom-column.col-5-6 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.custom-column.col-center {
text-align: center;
}
@media (max-width: 767px) {
.custom-column.col-1-2,
.custom-column.col-1-3,
.custom-column.col-1-4,
.custom-column.col-1-5,
.custom-column.col-1-6,
.custom-column.col-2-3,
.custom-column.col-3-4,
.custom-column.col-2-5,
.custom-column.col-3-5,
.custom-column.col-4-5,
.custom-column.col-5-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
.custom-row::after {
content: "";
display: table;
clear: both;
}
.custom-tabs-container {
border: 1px solid #e0e0e0;
margin-bottom: 20px;
overflow: hidden;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.custom-tabs-nav {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #e0e0e0;
background-color: #f9f9f9;
padding: 0 10px;
margin: 0;
}
.custom-tabs-nav-item {
padding: 12px 18px;
margin: 0;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
background-color: transparent;
font-size: 1em;
color: #555;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
margin-bottom: -1px;
white-space: nowrap;
}
.custom-tabs-nav-item:hover {
background-color: #f0f0f0;
color: #333;
}
.custom-tabs-nav-item.active,
.custom-tabs-nav-item[aria-selected="true"] {
border-bottom-color: #0073aa;
color: #333;
font-weight: 600;
background-color: #fff;
}
.custom-tabs-panels {
padding: 20px;
}
.custom-tabs-panel {
outline: none;
}
.custom-tabs-panel[hidden] {
display: none;
}
@media (max-width: 600px) {
.custom-tabs-nav {
padding: 0 5px;
}
.custom-tabs-nav-item {
padding: 10px 12px;
flex-grow: 1;
text-align: center;
border-bottom-width: 2px;
}
.custom-tabs-panels {
padding: 15px;
}
}
@media (max-width: 1050px) {
#floatingSidePanel {
width: 100%;
left: 0;
right: 0;
bottom: 0;
border-radius: 1.5rem 1.5rem 0 0;
margin-left: -1rem;
max-width: 95%;
}
#floatingSidePanel .panel-header {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
padding-left: 2rem;
padding-right: 1rem;
}
#floatingSidePanel p.panel-title-custom {
font-size: 1.15em;
margin-right: 0.5rem;
}
}
.post-index input.asap-toc-toggle-checkbox {
display: none !important;
opacity: 0 !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
pointer-events: none !important;
}
#floatingSidePanel:not(.expanded) .panel-collapsible-content {
max-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
}
}
@media (max-width: 1050px) {
#menu.asap-float {
overflow-x: hidden !important;
overflow-y: auto;
height: 280px !important;
width: 250px !important;
}
.mystic-stars-wrapper {
padding-left: 15px;
display: flex;
position: relative;
}
}
#floatingSidePanel {
z-index: 99999 !important;
position: fixed;
bottom: 0.5rem;
left: 1.5rem;
width: 430px;
background: linear-gradient(245deg, #7e3abf 0%, #5a279a 60%, #421888 100%);
color: white;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 2rem 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
z-index: 10000;
text-align: center;
overflow: hidden;
opacity: 0;
transform: translateY(calc(100% + 30px));
transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
max-height 0.5s ease-in-out,
padding-bottom 0.5s ease-in-out;
}
#floatingSidePanel.show {
opacity: 1;
transform: translateY(0);
}
.mystic-animation-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.mystic-animation-container .star {
position: absolute;
background-color: rgba(255, 255, 220, 0.7);
border-radius: 50%;
box-shadow: 0 0 3px rgba(255, 255, 220, 0.5), 0 0 6px rgba(255, 255, 220, 0.3);
animation: twinkle 3s infinite ease-in-out;
}
.mystic-animation-container .star1 {
width: 2px;
height: 2px;
top: 15%;
left: 22%;
animation-delay: 0s;
}
.mystic-animation-container .star2 {
width: 3px;
height: 3px;
top: 30%;
left: 85%;
animation-delay: 0.5s;
}
.mystic-animation-container .star3 {
width: 1px;
height: 1px;
top: 70%;
left: 10%;
animation-delay: 1s;
}
.mystic-animation-container .star4 {
width: 2px;
height: 2px;
top: 85%;
left: 60%;
animation-delay: 1.5s;
}
.mystic-animation-container .star5 {
width: 1px;
height: 1px;
top: 5%;
left: 50%;
animation-delay: 0.2s;
}
.mystic-animation-container .star6 {
width: 3px;
height: 3px;
top: 50%;
left: 35%;
animation-delay: 1.8s;
}
.mystic-animation-container .star7 {
width: 2px;
height: 2px;
top: 20%;
left: 5%;
animation-delay: 0.8s;
}
.mystic-animation-container .star8 {
width: 1px;
height: 1px;
top: 90%;
left: 90%;
animation-delay: 1.2s;
}
@keyframes twinkle {
0%,
100% {
opacity: 0.2;
transform: scale(0.7);
}
50% {
opacity: 0.9;
transform: scale(1.1);
}
}
.panel-header {
padding: 1rem 2.9rem;
padding-right: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
p.panel-title-custom {
margin: 0;
font-size: 1.45em;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6),
0 0 12px rgba(255, 220, 150, 0.4);
letter-spacing: 0.5px;
flex-grow: 1;
text-align: left;
padding-right: 15px;
}
.rotating-star-icon {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.5rem;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.rotating-star-icon::before {
content: '✦';
font-size: 2.4em;
color: #FFD700;
text-shadow: 0 0 4px #FFD700, 0 0 8px rgba(255, 215, 0, 0.5);
display: inline-block;
animation: rotateStarCollapsed 5s linear infinite;
transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.4s ease, animation-duration 0.4s ease;
}
@keyframes rotateStarCollapsed {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(360deg) scale(1);
}
}
#floatingSidePanel.expanded .rotating-star-icon::before {
animation-duration: 2.5s;
color: #FFFACD;
text-shadow: 0 0 7px #FFFACD, 0 0 14px rgba(255, 250, 205, 0.7), 0 0 20px rgba(255, 250, 205, 0.5);
transform: scale(1.15) rotate(0deg);
}
.panel-collapsible-content {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s, padding-top 0.5s ease-in-out, padding-bottom 0.5s ease-in-out;
padding: 0 1.5rem;
position: relative;
z-index: 1;
}
#floatingSidePanel.expanded .panel-collapsible-content {
max-height: 500px;
opacity: 1;
padding-top: 0.5rem;
padding-bottom: 1.5rem;
}
#floatingSidePanel .panel-intro-text {
font-weight: bold;
font-size: 1.1em;
margin: 0.5rem 0 2rem 0;
line-height: 1.7;
color: #fff;
}
#floatingSidePanel .panel-region-links {
margin: 1.9rem 0;
}
#floatingSidePanel .panel-region-links div {
margin-bottom: 0.5rem;
}
#floatingSidePanel a.panel-action-button {
color: white;
text-decoration: none;
border: 2px solid white;
border-radius: 20px;
padding: 0.5rem 1rem;
margin: 0.5rem auto;
margin-top: 10px;
display: inline-block;
font-size: 1.2em;
font-weight: bold;
background-color: transparent;
transition: background-color 0.3s ease, transform 0.2s ease;
}
#floatingSidePanel a.panel-action-button:hover {
background-color: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
#floatingSidePanel hr {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.3);
margin: 1rem 0;
}
#floatingSidePanel .panel-affiliate-note {
font-size: 0.75em;
color: #e0e0e0;
margin-top: 1rem;
line-height: 1.3;
}
.menu-tarot-tipos-nav {
background-color: transparent;
margin: 0;
clear: both;
width: 100%;
box-sizing: border-box;
perspective: 1000px;
border-bottom: 3px solid rgba(255, 255, 255, 0.05);
padding-bottom: 0px;
overflow: hidden;
}
.menu-tarot-tipos-list {
display: flex;
justify-content: center;
align-items: flex-start;
list-style: none;
margin: 0;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0 !important;
flex-wrap: nowrap;
gap: 40px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(184, 122, 230, 0.3) rgba(30, 20, 40, 0.1);
position: relative;
}
@media (max-width: 768px) {
#topMobileSubmenuContainer .menu-tarot-tipos-list {
justify-content: flex-start !important;
display: flex;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 20px !important;
gap: 15px;
-webkit-overflow-scrolling: touch;
.menu-tarot-tipos-item+.menu-tarot-tipos-item {
border-left: 2px solid rgba(216, 199, 179, 0.3);
}
}
.menu-tarot-tipos-item {
padding-left: 20px !important;
direction: ltr;
}
.menu-tarot-tipos-link {
width: 85px !important;
}
.menu-tarot-tipos-label {
white-space: nowrap;
}
}
.menu-tarot-tipos-list::-webkit-scrollbar {
height: 6px;
}
.menu-tarot-tipos-list::-webkit-scrollbar-track {
background: rgba(30, 20, 40, 0.1);
border-radius: 3px;
}
.menu-tarot-tipos-list::-webkit-scrollbar-thumb {
background-color: rgba(184, 122, 230, 0.3);
border-radius: 3px;
}
.menu-tarot-tipos-list::-webkit-scrollbar-thumb:hover {
background-color: rgba(184, 122, 230, 0.5);
}
.menu-tarot-tipos-item {
margin: 0;
padding: 0;
display: flex;
flex-shrink: 0;
position: relative;
}
.menu-tarot-tipos-link {
display: flex;
flex-direction: column-reverse;
align-items: center;
width: 88px;
text-decoration: none;
transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
position: relative;
}
.menu-tarot-tipos-link:hover {
transform: translateY(var(--arc-offset-hover-lift)) scale(1.1);
}
.menu-tarot-tipos-label {
font-weight: bold !important;
display: block;
font-size: 15px;
font-weight: 500;
color: #d8c7b3;
text-align: center;
line-height: 1.2;
padding-top: 30px;
padding-bottom: 2px;
transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
white-space: nowrap;
opacity: 0;
text-shadow: 0 0.5px 1px rgba(10, 5, 15, 0.35);
position: relative;
z-index: 10;
animation: materializeLabelFromBelow 1.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
transform-style: preserve-3d;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-label {
color: #ffffff;
text-shadow: 0 0 5px #ffffff, 0 0 10px rgba(255, 255, 255, 0.55);
transform: translateY(var(--arc-offset-label-final-hover)) scale(1.06) rotateX(0deg);
}
.menu-tarot-tipos-circle {
display: flex;
justify-content: center;
align-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1.5px solid;
text-decoration: none;
position: relative;
box-shadow: 0 1.5px 5px rgba(10, 5, 15, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.28);
cursor: pointer;
transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1),
box-shadow 0.45s cubic-bezier(0.215, 0.61, 0.355, 1),
background-color 0.45s ease-out,
border-color 0.45s ease-out;
opacity: 0;
transform-style: preserve-3d;
animation: materializeCircleFromAfar 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards,
levitateArcCircle 7s infinite alternate ease-in-out;
animation-play-state: running, paused;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle {
transform: scale(1.18) rotateY(0deg) rotateX(-5deg) translateZ(12px) translateY(var(--arc-offset-circle-final));
box-shadow: 0 4px 15px rgba(216, 199, 179, 0.3), inset 0 0 3.5px rgba(0, 0, 0, 0.22);
animation-play-state: running, paused !important;
}
.menu-tarot-tipos-circle svg {
width: 55%;
height: 55%;
display: block;
fill: #d8c7b3;
transition: transform 0.4s ease-out, opacity 0.4s ease-out, filter 0.4s ease-out, fill 0.4s ease-out;
transform-origin: center center;
filter: none;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle svg {
fill: #ffffff;
filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.45));
}
.menu-tarot-tipos-circle {
background-color: rgba(28, 22, 38, 0.2);
}
.menu-tarot-tipos-circle.tipo-gitano {
border-color: #8f7e6b;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle.tipo-gitano {
border-color: #d8c7b3;
background-color: rgba(48, 38, 68, 0.35);
}
.menu-tarot-tipos-link:hover .tipo-gitano svg {
animation: mysticSwirl 2s ease-in-out infinite;
}
.menu-tarot-tipos-circle.tipo-siono {
border-color: #a48f78;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle.tipo-siono {
border-color: #e6b88a;
background-color: rgba(53, 43, 68, 0.35);
}
.menu-tarot-tipos-link:hover .tipo-siono svg {
animation: checkPulse 1.5s infinite;
}
.menu-tarot-tipos-circle.tipo-amor {
border-color: #c8a07b;
}
.menu-tarot-tipos-circle.tipo-amor svg {
fill: #e8d0b8;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle.tipo-amor {
border-color: #e6b88a;
background-color: rgba(68, 48, 78, 0.35);
}
.menu-tarot-tipos-link:hover .tipo-amor svg {
animation: heartBeatMagic 1.2s ease-in-out infinite;
fill: #ffdcc2;
}
.menu-tarot-tipos-circle.tipo-dinero {
border-color: #8f7e6b;
}
.menu-tarot-tipos-circle.tipo-dinero svg {
fill: #d8c7b3;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle.tipo-dinero {
border-color: #e6b88a;
background-color: rgba(58, 48, 73, 0.35);
}
.menu-tarot-tipos-link:hover .tipo-dinero svg {
animation: coinRainAndShine 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
fill: #fff0cc;
}
.menu-tarot-tipos-circle.tipo-salud {
border-color: #a48f78;
}
.menu-tarot-tipos-circle.tipo-salud svg {
fill: #ffffff;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle.tipo-salud {
border-color: #d8c7b3;
background-color: rgba(48, 38, 68, 0.35);
}
.menu-tarot-tipos-link:hover .tipo-salud svg {
animation: healingCrossPulse 2.5s ease-in-out infinite;
fill: #ffeae0;
}
.menu-tarot-tipos-circle.tipo-preguntas {
border-color: #8f7e6b;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle.tipo-preguntas {
border-color: #d8c7b3;
background-color: rgba(48, 38, 68, 0.35);
}
.menu-tarot-tipos-link:hover .tipo-preguntas svg {
animation: questionPop 1.8s infinite;
}
.menu-tarot-tipos-circle.tipo-trescartas {
border-color: #c8a07b;
}
.menu-tarot-tipos-circle.tipo-trescartas svg {
fill: #d8c7b3;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle.tipo-trescartas {
border-color: #e6b88a;
background-color: rgba(63, 48, 73, 0.35);
}
.menu-tarot-tipos-link:hover .tipo-trescartas svg {
animation: revealCards 2s ease-out infinite;
}
.menu-tarot-tipos-circle.tipo-cartadia {
border-color: #8f7e6b;
}
.menu-tarot-tipos-link:hover .menu-tarot-tipos-circle.tipo-cartadia {
border-color: #d8c7b3;
background-color: rgba(48, 38, 68, 0.35);
}
.menu-tarot-tipos-link:hover .tipo-cartadia svg {
animation: dailyShine 2.2s infinite;
}
.menu-tarot-tipos-item .menu-tarot-tipos-circle {
animation-delay: calc(0.35s + var(--arc-delay-factor) * 0.14s), calc(1.9s + var(--arc-delay-factor) * 0.14s);
}
.menu-tarot-tipos-item .menu-tarot-tipos-label {
animation-delay: calc(0.55s + var(--arc-delay-factor) * 0.14s);
}
.menu-tarot-tipos-item .menu-tarot-tipos-circle::before,
.menu-tarot-tipos-item .menu-tarot-tipos-circle::after {
animation-play-state: running;
animation-delay: calc(1.95s + var(--arc-delay-factor) * 0.17s + var(--particle-delay-offset1, 0s)), calc(1.95s + var(--arc-delay-factor) * 0.17s + var(--particle-delay-offset2, -1.5s));
}
@keyframes materializeCircleFromAfar {
0% {
opacity: 0;
filter: blur(8px) saturate(0.2);
transform: scale(0.01) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateY(calc(var(--arc-offset-circle-initial) - 40px)) translateZ(-300px);
}
40% {
opacity: 0.3;
filter: blur(4px) saturate(0.5);
transform: scale(0.5) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateY(calc(var(--arc-offset-circle-initial) - 15px)) translateZ(-100px);
}
75% {
opacity: 0.9;
filter: blur(0.5px) saturate(0.9);
transform: scale(1.12) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateY(calc(var(--arc-offset-circle-final) + 5px)) translateZ(20px);
}
100% {
opacity: 1;
filter: blur(0) saturate(1);
transform: scale(1) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateY(var(--arc-offset-circle-final)) translateZ(0);
animation-play-state: running, running;
}
}
@keyframes materializeLabelFromBelow {
0% {
opacity: 0;
filter: blur(5px);
transform: translateY(calc(var(--arc-offset-label-initial) + 35px)) scale(0.4) rotateX(60deg);
}
45% {
opacity: 0.6;
filter: blur(2px);
transform: translateY(calc(var(--arc-offset-label-initial) + 12px)) scale(0.85) rotateX(20deg);
}
100% {
opacity: 1;
filter: blur(0);
transform: translateY(var(--arc-offset-label-final)) scale(1) rotateX(0deg);
}
}
@keyframes levitateArcCircle {
0% {
transform: translateY(var(--arc-offset-circle-final)) rotateX(0.8deg) rotateY(-0.8deg) translateZ(0);
}
50% {
transform: translateY(calc(var(--arc-offset-circle-final) - 3.5px)) rotateX(-1.8deg) rotateY(1.8deg) scale(1.02) translateZ(2px);
}
100% {
transform: translateY(var(--arc-offset-circle-final)) rotateX(0.8deg) rotateY(-0.8deg) translateZ(0);
}
}
.menu-tarot-tipos-circle::before,
.menu-tarot-tipos-circle::after {
content: '';
position: absolute;
border-radius: 50%;
background: #d8c7b3;
opacity: 0;
animation-name: etherealWisps;
animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation-iteration-count: infinite;
pointer-events: none;
box-shadow: 0 0 1px #d8c7b3, 0 0 2.5px #d8c7b3, 0 0 4px rgba(216, 199, 179, 0.55);
animation-play-state: paused;
}
.menu-tarot-tipos-item:nth-child(odd) .menu-tarot-tipos-circle::before {
width: 0.8px;
height: 0.8px;
animation-duration: 5.3s;
--particle-delay-offset1: 0.15s;
}
.menu-tarot-tipos-item:nth-child(odd) .menu-tarot-tipos-circle::after {
width: 1.3px;
height: 1.3px;
animation-duration: 4.8s;
--particle-delay-offset2: -1.35s;
}
.menu-tarot-tipos-item:nth-child(even) .menu-tarot-tipos-circle::before {
width: 1px;
height: 1px;
animation-duration: 5s;
--particle-delay-offset1: 0.3s;
}
.menu-tarot-tipos-item:nth-child(even) .menu-tarot-tipos-circle::after {
width: 1.6px;
height: 1.6px;
animation-duration: 5.4s;
--particle-delay-offset2: -1.65s;
}
@keyframes etherealWisps {
0% {
transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
opacity: 0;
}
15% {
opacity: 0.6;
}
25% {
transform: translate(calc(-50% + var(--x1)), calc(-50% + var(--y1))) scale(1) rotate(var(--r1));
opacity: 0.6;
}
40% {
opacity: 0.45;
}
50% {
transform: translate(calc(-50% + var(--x2)), calc(-50% + var(--y2))) scale(0.5) rotate(var(--r2));
opacity: 0.45;
}
65% {
opacity: 0.35;
}
75% {
transform: translate(calc(-50% + var(--x3)), calc(-50% + var(--y3))) scale(1.1) rotate(var(--r3));
opacity: 0.35;
}
90% {
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(0.2) rotate(var(--r4));
opacity: 0;
}
}
@keyframes heartBeatMagic {
0%,
100% {
transform: scale(1);
opacity: 0.9;
filter: drop-shadow(0 0 1.8px #ffdcc2);
}
25% {
transform: scale(1.3);
opacity: 1;
filter: drop-shadow(0 0 6.5px #ffc799) drop-shadow(0 0 2.8px #c8a07b);
}
50% {
transform: scale(1);
opacity: 0.9;
filter: drop-shadow(0 0 1.8px #ffdcc2);
}
75% {
transform: scale(1.2);
opacity: 1;
filter: drop-shadow(0 0 4.5px #ffc799);
}
}
@keyframes coinRainAndShine {
0% {
transform: translateY(-55%) rotateY(-16deg) scale(0.68);
opacity: 0;
}
30% {
transform: translateY(0) rotateY(180deg) scale(1.12);
opacity: 1;
filter: brightness(1.85) drop-shadow(0 0 8.5px #fff0cc);
}
70% {
transform: translateY(5.5px) rotateY(360deg) scale(1.05);
opacity: 1;
filter: brightness(1.55) drop-shadow(0 0 5.5px #e6b88a);
}
100% {
transform: translateY(0) rotateY(360deg) scale(1);
opacity: 1;
filter: brightness(1.28);
}
}
@keyframes healingCrossPulse {
0%,
100% {
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 1.3px #ffeae0) drop-shadow(0 0 0.4px #d8c7b3);
opacity: 0.9;
}
50% {
transform: scale(1.22);
rotate: (4.5deg);
filter: drop-shadow(0 0 7.5px #ffffff) drop-shadow(0 0 3px #ffeae0) drop-shadow(0 0 1.3px #d8c7b3);
opacity: 1;
}
}
@keyframes mysticSwirl {
0%,
100% {
transform: rotate(-3.5deg) scale(1);
filter: drop-shadow(0 0 2.3px #e1afff);
}
50% {
transform: rotate(15deg) scale(1.17);
filter: drop-shadow(0 0 8.5px #c77dff);
}
}
@keyframes checkPulse {
0%,
100% {
transform: scale(1);
filter: drop-shadow(0 0 1.8px #8fe0d5);
}
50% {
transform: scale(1.27);
filter: drop-shadow(0 0 6px #5dc6ba);
}
}
@keyframes questionPop {
0% {
transform: scale(1) rotate(0deg);
}
20% {
transform: scale(1.22) rotate(-6.5deg);
}
40% {
transform: scale(0.8) rotate(6.5deg);
}
60% {
transform: scale(1.15) rotate(-2.8deg);
}
80% {
transform: scale(0.88) rotate(2.8deg);
}
100% {
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 5px #9cd5fc);
}
}
@keyframes revealCards {
0% {
transform: scale(0.7) rotateY(-35deg) translateX(-11.5px);
opacity: 0.45;
}
50% {
transform: scale(1.09) rotateY(0deg) translateX(0px);
opacity: 1;
filter: drop-shadow(0 0 6px #ffffff);
}
100% {
transform: scale(1) rotateY(6.5deg) translateX(2.8px);
opacity: 0.81;
}
}
@keyframes dailyShine {
0%,
100% {
transform: scale(1) rotate(-2.8deg);
filter: brightness(1.1) drop-shadow(0 0 3.3px #fff9c4);
}
50% {
transform: scale(1.12) rotate(2.8deg);
filter: brightness(1.6) drop-shadow(0 0 10.5px #fff176);
}
}
.menu-tarot-tipos-item:nth-child(1) {
--arc-offset-circle-initial: -10px;
--arc-offset-label-initial: -33px;
--arc-offset-circle-final: 0px;
--arc-offset-label-final: -28px;
--arc-offset-label-final-hover: -31px;
--arc-delay-factor: 0;
--arc-offset-hover-lift: -3.5px;
}
.menu-tarot-tipos-item:nth-child(1) .menu-tarot-tipos-circle {
--x1: -12px;
--y1: 11px;
--r1: -22deg;
--x2: 17px;
--y2: -8px;
--r2: 28deg;
--x3: -7px;
--y3: 16px;
--r3: -13deg;
--r4: 38deg;
}
.menu-tarot-tipos-item:nth-child(2) {
--arc-offset-circle-initial: -10px;
--arc-offset-label-initial: -33px;
--arc-offset-circle-final: 0px;
--arc-offset-label-final: -28px;
--arc-offset-label-final-hover: -31px;
--arc-delay-factor: 1;
--arc-offset-hover-lift: -3.5px;
}
.menu-tarot-tipos-item:nth-child(2) .menu-tarot-tipos-circle {
--x1: 9px;
--y1: -19px;
--r1: 32deg;
--x2: -11px;
--y2: 14px;
--r2: -38deg;
--x3: 18px;
--y3: -5px;
--r3: 18deg;
--r4: -48deg;
}
.menu-tarot-tipos-item:nth-child(3) {
--arc-offset-circle-initial: -10px;
--arc-offset-label-initial: -33px;
--arc-offset-circle-final: 0px;
--arc-offset-label-final: -28px;
--arc-offset-label-final-hover: -31px;
--arc-delay-factor: 2;
--arc-offset-hover-lift: -3.5px;
}
.menu-tarot-tipos-item:nth-child(3) .menu-tarot-tipos-circle {
--x1: -16px;
--y1: -6px;
--r1: -42deg;
--x2: 10px;
--y2: 16px;
--r2: 48deg;
--x3: 1px;
--y3: -19px;
--r3: -28deg;
--r4: 58deg;
}
.menu-tarot-tipos-item:nth-child(4) {
--arc-offset-circle-initial: -10px;
--arc-offset-label-initial: -33px;
--arc-offset-circle-final: 0px;
--arc-offset-label-final: -28px;
--arc-offset-label-final-hover: -31px;
--arc-delay-factor: 3;
--arc-offset-hover-lift: -3.5px;
}
.menu-tarot-tipos-item:nth-child(4) .menu-tarot-tipos-circle {
--x1: 6px;
--y1: 19px;
--r1: 52deg;
--x2: -19px;
--y2: -1px;
--r2: -58deg;
--x3: 11px;
--y3: 6px;
--r3: 38deg;
--r4: -68deg;
}
.menu-tarot-tipos-item:nth-child(5) {
--arc-offset-circle-initial: -10px;
--arc-offset-label-initial: -33px;
--arc-offset-circle-final: 0px;
--arc-offset-label-final: -28px;
--arc-offset-label-final-hover: -31px;
--arc-delay-factor: 4;
--arc-offset-hover-lift: -3.5px;
}
.menu-tarot-tipos-item:nth-child(5) .menu-tarot-tipos-circle {
--x1: -14px;
--y1: 10px;
--r1: -18deg;
--x2: 18px;
--y2: -9px;
--r2: 23deg;
--x3: -6px;
--y3: 15px;
--r3: -8deg;
--r4: 33deg;
}
.menu-tarot-tipos-item:nth-child(6) {
--arc-offset-circle-initial: -10px;
--arc-offset-label-initial: -33px;
--arc-offset-circle-final: 0px;
--arc-offset-label-final: -28px;
--arc-offset-label-final-hover: -31px;
--arc-delay-factor: 5;
--arc-offset-hover-lift: -3.5px;
}
.menu-tarot-tipos-item:nth-child(6) .menu-tarot-tipos-circle {
--x1: 8px;
--y1: -17px;
--r1: 28deg;
--x2: -10px;
--y2: 13px;
--r2: -33deg;
--x3: 16px;
--y3: -4px;
--r3: 13deg;
--r4: -43deg;
}
.menu-tarot-tipos-item:nth-child(7) {
--arc-offset-circle-initial: -10px;
--arc-offset-label-initial: -33px;
--arc-offset-circle-final: 0px;
--arc-offset-label-final: -28px;
--arc-offset-label-final-hover: -31px;
--arc-delay-factor: 6;
--arc-offset-hover-lift: -3.5px;
}
.menu-tarot-tipos-item:nth-child(7) .menu-tarot-tipos-circle {
--x1: -18px;
--y1: -4px;
--r1: -38deg;
--x2: 9px;
--y2: 15px;
--r2: 43deg;
--x3: 3px;
--y3: -18px;
--r3: -23deg;
--r4: 53deg;
}
.menu-tarot-tipos-item:nth-child(8) {
--arc-offset-circle-initial: -10px;
--arc-offset-label-initial: -33px;
--arc-offset-circle-final: 0px;
--arc-offset-label-final: -28px;
--arc-offset-label-final-hover: -31px;
--arc-delay-factor: 7;
--arc-offset-hover-lift: -3.5px;
}
.menu-tarot-tipos-item:nth-child(8) .menu-tarot-tipos-circle {
--x1: 5px;
--y1: 18px;
--r1: 48deg;
--x2: -17px;
--y2: -2px;
--r2: -53deg;
--x3: 10px;
--y3: 5px;
--r3: 33deg;
--r4: -63deg;
}
.menu-tarot-tipos-item .menu-tarot-tipos-circle {
animation-delay: calc(0.35s + var(--arc-delay-factor) * 0.14s), calc(1.9s + var(--arc-delay-factor) * 0.14s);
}
.menu-tarot-tipos-item .menu-tarot-tipos-label {
animation-delay: calc(0.55s + var(--arc-delay-factor) * 0.14s);
}
.menu-tarot-tipos-item .menu-tarot-tipos-circle::before,
.menu-tarot-tipos-item .menu-tarot-tipos-circle::after {
animation-play-state: running;
animation-delay: calc(1.95s + var(--arc-delay-factor) * 0.17s + var(--particle-delay-offset1, 0s)), calc(1.95s + var(--arc-delay-factor) * 0.17s + var(--particle-delay-offset2, -1.5s));
}
.menu-tarot-tipos-item:nth-child(odd) .menu-tarot-tipos-circle::before {
width: 0.8px;
height: 0.8px;
animation-duration: 5.3s;
--particle-delay-offset1: 0.15s;
}
.menu-tarot-tipos-item:nth-child(odd) .menu-tarot-tipos-circle::after {
width: 1.3px;
height: 1.3px;
animation-duration: 4.8s;
--particle-delay-offset2: -1.35s;
}
.menu-tarot-tipos-item:nth-child(even) .menu-tarot-tipos-circle::before {
width: 1px;
height: 1px;
animation-duration: 5s;
--particle-delay-offset1: 0.3s;
}
.menu-tarot-tipos-item:nth-child(even) .menu-tarot-tipos-circle::after {
width: 1.6px;
height: 1.6px;
animation-duration: 5.4s;
--particle-delay-offset2: -1.65s;
}
#topMobileSubmenuContainer {
background-color: transparent !important;
padding: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#topMobileSubmenuContainer .menu-tarot-tipos-nav {
border-bottom: none;
margin: 0;
padding-bottom: 0;
width: 100%;
overflow: visible;
}
#topMobileSubmenuContainer .menu-tarot-tipos-list {
padding-top: 10px;
padding-bottom: 10px;
justify-content: center;
}
@media (min-width: 1051px) {
#topMobileSubmenuContainer {
display: none !important;
}
}
@media (max-width: 1050px) {
#topMobileSubmenuContainer .menu-tarot-tipos-nav {
perspective: none;
overflow: visible;
padding-top: 5px;
padding-bottom: 5px;
}
#topMobileSubmenuContainer .menu-tarot-tipos-list {
padding-top: 70px;
padding-bottom: 10px;
gap: 25px;
align-items: center;
overflow-x: scroll !important;
}
#topMobileSubmenuContainer .menu-tarot-tipos-link {
width: 65px;
}
#topMobileSubmenuContainer .menu-tarot-tipos-link:hover {
transform: translateY(var(--arc-offset-hover-lift, -2px)) scale(1.05);
}
#topMobileSubmenuContainer .menu-tarot-tipos-label {
font-size: 12px;
margin-bottom: -45px;
padding-bottom: 18px;
white-space: normal;
line-height: 1.5;
letter-spacing: 0.4px;
max-width: 100%;
min-height: 90px !important;
}
#topMobileSubmenuContainer .menu-tarot-tipos-link:hover .menu-tarot-tipos-label {
transform: translateY(var(--arc-offset-label-final-hover, -22px)) scale(1.03) rotateX(0deg);
}
#topMobileSubmenuContainer .menu-tarot-tipos-circle {
width: 30px;
height: 30px;
border-width: 1px;
box-shadow: 0 1px 3px rgba(10, 5, 15, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
#topMobileSubmenuContainer .menu-tarot-tipos-link:hover .menu-tarot-tipos-circle {
transform: scale(1.1) translateY(var(--arc-offset-circle-final, 0px));
box-shadow: 0 2px 8px rgba(216, 199, 179, 0.2), inset 0 0 2.5px rgba(0, 0, 0, 0.18);
}
#topMobileSubmenuContainer .menu-tarot-tipos-circle svg {
width: 60%;
height: 60%;
}
#topMobileSubmenuContainer .menu-tarot-tipos-circle::before,
#topMobileSubmenuContainer .menu-tarot-tipos-circle::after {
display: none;
}
}
.site-logo img {
margin-top: -0px !important;
}
@media (max-width: 1050px) {
#topMobileSubmenuContainer .menu-tarot-tipos-circle {
animation-name: none !important;
opacity: 1 !important;
transform: translateY(var(--arc-offset-circle-final, 0px)) !important;
filter: none !important;
}
#topMobileSubmenuContainer .menu-tarot-tipos-label {
animation-name: none !important;
opacity: 1 !important;
transform: translateY(var(--arc-offset-label-final, -28px)) !important;
filter: none !important;
}
#topMobileSubmenuContainer .menu-tarot-tipos-circle::before,
#topMobileSubmenuContainer .menu-tarot-tipos-circle::after {
display: none !important;
}
body .menu-tarot-tipos-nav {
display: none !important;
}
#topMobileSubmenuContainer .menu-tarot-tipos-nav {
display: block !important;
visibility: visible !important;
}
.site-logo img {
margin-top: 20px;
padding-top: 0px;
}
}
@media (max-width: 768px) {
.contenedor-in-article {
padding-bottom: 20px;
}
.links-in-article-intro p {
animation: none;
opacity: 1;
filter: blur(0) saturate(1);
transform: translateY(0) scale(1);
width: 300px;
margin-top: 20px;
padding-bottom: 15px;
}
.links-in-article-intro .lia-icon {
animation: none;
opacity: 1;
transform: scale(1) rotate(0deg);
}
.links-in-article-label {
animation: none;
opacity: 1;
transform: translateY(0) scale(1);
}
.links-in-article-list .links-in-article-item:nth-child(1) .links-in-article-label,
.links-in-article-list .links-in-article-item:nth-child(2) .links-in-article-label,
.links-in-article-list .links-in-article-item:nth-child(3) .links-in-article-label,
.links-in-article-list .links-in-article-item:nth-child(4) .links-in-article-label {
animation-delay: 0s;
}
.links-in-article-circle {
margin-bottom: -40px;
animation: none;
opacity: 1;
transform: scale(1) rotateY(0deg) translateZ(0);
animation-play-state: initial;
}
.links-in-article-link:hover .links-in-article-circle {
animation-play-state: initial;
}
.links-in-article-list .links-in-article-item:nth-child(1) .links-in-article-circle,
.links-in-article-list .links-in-article-item:nth-child(2) .links-in-article-circle,
.links-in-article-list .links-in-article-item:nth-child(3) .links-in-article-circle,
.links-in-article-list .links-in-article-item:nth-child(4) .links-in-article-circle {
animation-delay: 0s;
}
.links-in-article-circle::before,
.links-in-article-circle::after {
animation-play-state: running;
}
.links-in-article-list .links-in-article-item:nth-child(1) .links-in-article-circle::before,
.links-in-article-list .links-in-article-item:nth-child(1) .links-in-article-circle::after {
animation-delay: 0.5s;
}
.links-in-article-list .links-in-article-item:nth-child(2) .links-in-article-circle::before,
.links-in-article-list .links-in-article-item:nth-child(2) .links-in-article-circle::after {
animation-delay: 0.7s;
}
.links-in-article-list .links-in-article-item:nth-child(3) .links-in-article-circle::before,
.links-in-article-list .links-in-article-item:nth-child(3) .links-in-article-circle::after {
animation-delay: 0.9s;
}
.links-in-article-list .links-in-article-item:nth-child(4) .links-in-article-circle::before,
.links-in-article-list .links-in-article-item:nth-child(4) .links-in-article-circle::after {
animation-delay: 1.1s;
}
.links-in-article-list {
gap: 0px;
}
.links-in-article-link {
padding-right: 50px;
margin-right: -10px;
width: 50px;
}
.links-in-article-circle {
width: 50px;
height: 50px;
}
.links-in-article-label {
font-size: 16px;
margin-top: 8px;
}
.links-in-article-intro p {
font-size: 1.5rem;
padding-top: 20px;
}
}
.intro-author-box.oracle-portal {
position: relative;
padding: 5px 12px 10px 30px;
display: block;
margin-bottom: 25px;
margin-top: -15px;
margin-left: -30px;
width: 100%;
box-sizing: border-box;
background: transparent;
color: rgba(255, 253, 250, 0.95);
font-style: italic;
text-shadow: 0 0 3px rgba(255, 253, 250, 0.2);
overflow: hidden;
z-index: 1;
}
.portal-background-effects {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.portal-content-inline {
position: relative;
z-index: 1;
display: flex;
align-items: center;
width: 100%;
gap: 14px;
}
.author-focus-area {
position: relative;
width: 55px;
height: 55px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.rotating-astral-dial {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
animation: astral-dial-spin 40s linear infinite;
}
.astral-dial-svg {
width: 100%;
height: 100%;
fill: none;
}
.astral-dial-svg .dial-ring-outer {
stroke: rgba(255, 253, 250, 0.75);
stroke-width: 1.8px;
}
.astral-dial-svg .dial-ring-middle {
stroke: rgba(255, 253, 250, 0.6);
stroke-width: 1.3px;
}
.astral-dial-svg .dial-ring-inner {
stroke: rgba(255, 253, 250, 0.45);
stroke-width: 0.8px;
}
.astral-dial-svg .dial-tick {
stroke: rgba(255, 253, 250, 0.65);
stroke-width: 1.3px;
}
@keyframes astral-dial-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.author-avatar-link {
display: block;
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 2;
}
.author-avatar-img {
display: block;
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 50%;
border: 1px solid rgba(255, 253, 250, 0.45);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4),
0 0 3px rgba(255, 253, 250, 0.3);
}
.mystic-time-indicator {
margin-left: 20px;
margin-right: 10px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transform: translateY(0px);
}
.time-indicator-svg {
width: 40px;
height: 40px;
overflow: visible;
margin-left: 20px;
}
.time-indicator-svg .static-pointer-hand,
.time-indicator-svg .clock-face,
.time-indicator-svg .clock-details {
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.time-indicator-svg .static-pointer-hand {
stroke: rgba(255, 253, 250, 0.9);
stroke-width: 0.9px;
filter: drop-shadow(0 0 2px rgba(255, 253, 250, 0.65));
animation: subtle-pointer-glow 3s infinite alternate ease-in-out;
transform: translateX(-16px);
}
@keyframes subtle-pointer-glow {
from {
stroke: rgba(255, 253, 250, 0.8);
filter: drop-shadow(0 0 1.5px rgba(255, 253, 250, 0.55));
}
to {
stroke: rgba(255, 255, 255, 1);
filter: drop-shadow(0 0 3.5px rgba(255, 255, 255, 0.8));
}
}
.time-indicator-svg .clock-face {
stroke: rgba(255, 253, 250, 0.65);
stroke-width: 0.1px;
}
.time-indicator-svg .clock-details {
stroke: rgba(255, 253, 250, 0.5);
stroke-width: 0.6px;
}
.time-indicator-svg .clock-marker-major {
fill: rgba(255, 253, 250, 0.45);
stroke: rgba(255, 253, 250, 0.6);
stroke-width: 0.4px;
}
.time-indicator-svg .center-gem {
fill: rgba(255, 250, 240, 0.7);
stroke: rgba(255, 250, 240, 0.9);
stroke-width: 0.1px;
}
.time-indicator-svg .rotating-hand-fast,
.time-indicator-svg .rotating-hand-slow,
.time-indicator-svg .rotating-dial-inner {
transform-origin: center center;
}
.time-indicator-svg .rotating-hand-fast {
stroke: rgba(255, 253, 250, 0.75);
stroke-width: 1px;
animation: timepiece-fast-spin 10s linear infinite;
}
.time-indicator-svg .rotating-hand-slow {
stroke: rgba(255, 253, 250, 0.65);
stroke-width: 1.3px;
animation: timepiece-slow-spin 67s linear infinite;
}
.time-indicator-svg .rotating-dial-inner {
animation: timepiece-fast-spin 20s linear infinite;
}
@keyframes timepiece-fast-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes timepiece-slow-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.author-byline-text,
.article-update-text {
font-size: 0.8em;
line-height: 1.6;
letter-spacing: 0.5px;
white-space: nowrap;
font-weight: 600;
}
.author-name-link {
font-weight: 700;
text-decoration: none;
color: #FFF2E0;
transition: color 0.3s ease, text-shadow 0.3s ease;
text-shadow: 0 0 5px rgba(255, 230, 200, 0.9),
0 0 9px rgba(240, 210, 180, 0.5),
0 0 12px rgba(0, 0, 0, 0.35);
}
.author-name-link:hover {
color: #FFFFFF;
text-shadow: 0 0 7px rgba(255, 235, 210, 0.9),
0 0 14px rgba(245, 220, 190, 0.7),
0 0 18px rgba(0, 0, 0, 0.35);
}
@media (max-width: 768px) {
.intro-author-box.oracle-portal {
margin-left: 0px;
padding-left: 10px;
margin-right: 0px;
margin-bottom: 20px;
}
.portal-content-inline {
flex-wrap: wrap;
gap: 1px 10px;
align-items: center;
}
.mystic-time-indicator {
padding-left: 17px;
}
.article-update-text {
font-size: 0.65em;
letter-spacing: 0.1px;
color: rgba(255, 253, 250, 0.8);
text-shadow: none;
white-space: normal;
margin-top: -13px !important;
flex-basis: 100%;
text-align: left;
padding-left: calc(52px + 10px);
box-sizing: border-box;
}
.author-focus-area {
transform: translateY(10px);
align-self: center;
}
.author-byline-text {
margin-left: 20px;
}
}
.mystic-arrow-separator {
display: inline-flex;
align-items: center;
padding-left: 10px;
color: #D1C7B6;
}
.mystic-arrow-separator svg {
width: 22px;
height: 22px;
fill: currentColor;
filter: drop-shadow(0 0 3px rgba(255, 230, 180, 0.35));
}
.author-box {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #fdfdfd;
margin-top: 30px;
margin-bottom: 40px;
}
.author-box-avatar img {
border-radius: 50%;
width: 70px;
height: 70px;
object-fit: cover;
}
.author-box-info {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.author-box-heading {
margin-top: 0;
margin-bottom: 10px;
line-height: 1.3;
}
.author-box-heading .author-name-link {
text-decoration: none;
display: block;
margin-bottom: 8px;
}
.author-box-heading .author-name-link span[itemprop="name"] {
font-size: 1.2em;
font-weight: 700;
color: #2c3e50;
}
.author-box-heading .author-name-link:hover span[itemprop="name"] {
text-decoration: underline;
color: #1a2530;
}
.author-box-heading .author-job-title-block {
display: block;
font-size: 0.95em;
font-weight: 500;
color: #34495e;
}
.author-box-heading .author-job-title-block .author-title-separator {
display: none;
}
.author-box-dates {
font-size: 0.8em;
color: #7f8c8d;
margin-top: 0;
margin-bottom: 15px;
padding-top: 15px;
padding-bottom: 10px;
border-top: 1px solid #ecf0f1;
line-height: 1.4;
font-style: italic;
}
.author-box-dates .author-published-date,
.author-box-dates .author-last-updated {
display: inline-block;
}
.author-box-dates .author-last-updated::before {
content: " | ";
font-style: normal;
padding: 0 0.5em;
color: #abb7b7;
}
.author-bio-container {
margin-top: 0;
margin-bottom: 15px;
padding-top: 12px;
border-top: 1px solid #ecf0f1;
}
.author-box-desc,
.author-bio-content {
font-size: 0.9em;
color: #555;
line-height: 1.6;
margin: 0 0 10px 0;
}
.read-more-checkbox {
display: none;
}
.author-bio-content.full {
display: none;
}
.read-more-label {
display: inline-block;
cursor: pointer;
color: #3498db;
font-weight: bold;
font-size: 0.85em;
}
.read-more-label:hover {
text-decoration: underline;
}
.read-more-label::after {
content: attr(data-text-more);
}
.read-more-checkbox:checked~.author-bio-content.short {
display: none;
}
.read-more-checkbox:checked~.author-bio-content.full {
display: block;
}
.read-more-checkbox:checked~.read-more-label::after {
content: attr(data-text-less);
}
@media (min-width: 768px) {
.read-more-checkbox,
.read-more-label {
display: none !important;
}
.author-bio-content.short {
display: none !important;
}
.author-bio-content.full {
display: block !important;
}
.author-box-desc {
display: block !important;
}
.author-box-heading .author-name-link {
display: inline;
margin-bottom: 0;
}
.author-title-separator {
padding-left: 15px;
padding-right: 15px;
}
.author-box-heading .author-job-title-block {
display: inline;
margin-top: 0;
font-size: 1.05em;
}
.author-box-heading .author-job-title-block .author-title-separator {
display: inline;
color: #95a5a6;
padding: 0 0.6em;
}
.author-box-avatar img {
width: 80px;
height: 80px;
}
.author-box-dates {
font-size: 0.8em;
}
.author-box-desc,
.author-bio-content {
font-size: 0.95em;
}
}
@media (max-width: 767px) {
.author-box {
flex-direction: column;
align-items: center;
text-align: center;
gap: 15px;
}
.author-box-info {
width: 100%;
}
.author-box-heading .author-job-title-block {
margin-top: 5px;
font-size: 0.9em;
}
.author-box-heading .author-job-title-block .author-title-separator {
display: none;
}
.author-box-social {
text-align: center;
width: 100%;
}
}
.author-box-social {
margin-top: auto;
padding-top: 10px;
}
:root {
--color-deep-purple: #1f122e;
--color-mystic-purple: #3b1f59;
--color-gold-shine: #ffd700;
--color-gold-muted: #daa520;
--color-light-lavender: #e6e6fa;
--color-off-white: #f8f0e3;
}
.tarot-card-module {
margin-bottom: 20px;
width: 100%;
background: linear-gradient(135deg, #0B090E 0%, #17111F 50%, #0B090E 100%);
color: var(--color-off-white);
padding: 10px 25px 20px 10px;
border: 1px solid var(--color-gold-muted);
border-radius: 10px;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.1), 0 0 25px rgba(59, 31, 89, 0.7);
position: relative;
overflow: hidden;
}
.card-module-title {
margin-left: 300px;
margin-top: 10px;
font-family: 'Cinzel', serif;
font-size: 2.1em;
color: var(--color-gold-shine);
text-align: center;
text-shadow: 0 0 7px var(--color-gold-muted), 0 0 12px var(--color-mystic-purple);
font-weight: 800;
line-height: 1.1;
}
.card-module-title .title-suit {
font-size: 0.7em;
color: var(--color-light-lavender);
font-weight: 400;
margin-left: 0.2em;
margin-right: 0.2em;
opacity: 0.9;
display: inline;
}
.card-module-grid {
display: grid;
grid-template-columns: .55fr 1.35fr;
gap: 1px;
margin-top: -40px;
}
.card-module-visual {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0px !important;
}
.card-module-image-wrapper {
height: 320px;
position: relative;
padding: 5px;
border: 1.5px solid var(--color-gold-muted);
border-radius: 8px;
background: linear-gradient(215deg, var(--color-mystic-purple), var(--color-deep-purple));
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25), inset 0 0 6px rgba(255, 215, 0, 0.1);
}
.card-module-image {
display: block;
max-width: 120px;
height: auto;
border-radius: 5px;
border: 1px solid rgba(255, 215, 0, 0.1);
}
.image-focus-glow {
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border-radius: 12px;
box-shadow: 0 0 12px 2px rgba(255, 215, 0, 0.2), 0 0 20px 6px rgba(128, 0, 128, 0.1);
pointer-events: none;
opacity: 0;
animation: pulseGlow 4s infinite alternate ease-in-out;
}
@keyframes pulseGlow {
0% {
opacity: 0.4;
transform: scale(0.99);
}
100% {
opacity: 0.7;
transform: scale(1.01);
}
}
.card-module-actions {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
max-width: 230px;
margin-top: 30px;
}
.action-button-styled {
margin-bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 15px;
font-size: 1.0em;
font-weight: 600;
text-decoration: none;
border-radius: 20px;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
cursor: pointer;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.action-button-styled.btn-details {
background: linear-gradient(145deg, var(--color-gold-shine), var(--color-gold-muted));
color: var(--color-deep-purple);
border: 1px solid var(--color-gold-shine);
box-shadow: 0 2px 5px rgba(255, 215, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.action-button-styled.btn-combinations {
background: linear-gradient(145deg, var(--color-mystic-purple), #502D7A);
color: var(--color-gold-shine);
border: 1px solid var(--color-gold-muted);
box-shadow: 0 2px 5px rgba(59, 31, 89, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.action-button-styled .btn-icon {
margin-right: 10px;
font-size: 1.6em;
line-height: 1;
}
.action-button-styled:hover,
.action-button-styled:focus {
transform: translateY(-1px) scale(1.01);
box-shadow: 0 4px 8px rgba(255, 215, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
}
.btn-click-aura {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
}
.action-button-styled:active .btn-click-aura {
animation: clickRipple 0.4s ease-out;
}
@keyframes clickRipple {
0% {
width: 0;
height: 0;
opacity: 0.3;
}
100% {
width: 250%;
padding-bottom: 250%;
opacity: 0;
}
}
.card-module-interpretation {
padding: 29px 20px 20px 30px;
background-color: rgba(0, 0, 0, 0.08);
border-radius: 5px;
border-left: 3px solid rgba(218, 165, 32, 0.1);
border-top: 4px solid rgba(218, 165, 32, 0.1);
}
.module-general-meaning {
margin-bottom: 15px;
padding-bottom: 1px;
border-bottom: 1px dashed rgba(218, 165, 32, 0.2);
}
.module-general-meaning:last-of-type {
border-bottom: none;
margin-bottom: 20px;
}
.module-heading {
font-size: 1.15em;
color: var(--color-gold-muted);
margin-bottom: 5px;
font-weight: 700;
text-shadow: 0 0 3px rgba(218, 165, 32, 0.25);
}
.module-text-summary,
.sphere-text {
font-weight: 400;
font-size: 1.0em;
line-height: 1.5;
color: var(--color-light-lavender);
opacity: 0.8;
}
.sphere-text:last-child {
margin-bottom: 1;
}
.sphere-text strong {
color: var(--color-gold-shine);
font-weight: 400;
}
.module-tabs-area {
margin-top: -25px;
}
.module-tab-nav {
display: flex;
border-bottom: 1px solid var(--color-gold-muted);
position: relative;
}
.module-tab-link {
background-color: transparent;
border: 2px solid transparent;
border-bottom: none;
padding: 8px 90px;
cursor: pointer;
color: var(--color-light-lavender);
font-size: 1em;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
margin-right: 2px;
opacity: 0.6;
position: relative;
text-align: center;
border-radius: 5px 5px 0 0;
}
.module-tab-link:hover {
color: var(--color-gold-shine);
opacity: 1;
}
.module-tab-link.active {
background-color: var(--color-gold-shine);
color: var(--color-deep-purple);
font-weight: 700;
border: 1px solid var(--color-gold-shine);
border-bottom-color: var(--color-gold-shine);
opacity: 1;
text-shadow: none;
margin-bottom: -1px;
z-index: 2;
}
.module-tab-content-area {
border: 1px solid var(--color-gold-muted);
border-top: none;
border-radius: 0 0 4px 4px;
background-color: rgba(0, 0, 0, 0.03);
clear: both;
}
.module-tab-panel {
display: none;
padding: 15px 22px 0;
animation: fadeInTab 0.3s ease-in-out;
margin-bottom: -17px;
}
.module-tab-panel.active {
display: block;
}
@keyframes fadeInTab {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 767px) {
.tarot-card-module {
padding: 10px;
max-height: none;
}
.card-module-title {
margin-left: 0;
text-align: center;
font-size: 1.6em;
margin-top: 15px;
padding-bottom: 15px !important;
}
.card-module-title .title-suit {
font-size: 0.65em;
margin-left: 0;
margin-top: 7px;
margin-bottom: 7px;
}
.card-module-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: none;
padding-top: 10px;
margin-bottom: none;
}
.card-module-visual {
margin-top: 0px !important;
width: 100%;
}
.card-module-image-wrapper {
height: auto;
margin-bottom: 10px;
max-width: 120px;
width: 100%;
}
.card-module-image {
width: 100%;
}
.card-module-actions {
gap: 0px;
max-width: 200px;
margin-bottom: 10px;
}
.action-button-styled {
margin-top: 0;
margin-bottom: 0;
font-size: 0.9em;
padding: 8px 12px;
}
.action-button-styled .btn-icon {
font-size: 1.5em;
margin-right: 12px;
}
.card-module-interpretation {
padding: 15px;
border-left: none;
border-top: 1px solid rgba(218, 165, 32, 0.1);
}
.module-heading {
font-size: 1.05em;
}
.module-text-summary,
.sphere-text {
font-size: 0.9em;
line-height: 1.5;
}
.module-tabs-area {
margin-top: -20px;
}
.module-tab-nav {
flex-wrap: wrap;
justify-content: center;
margin-bottom: -1px;
}
.module-tab-link {
padding: 7px 10px;
font-size: 0.9em;
flex-grow: 1;
min-width: 70px;
margin-bottom: 3px;
text-align: center;
}
.module-tab-panel {
padding: 15px 10px 5px;
}
}
.hero-section .image-section .tarot-gallery4 {
margin-left: 150px;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
column-gap: 18px !important;
row-gap: 8px !important;
width: 100% !important;
max-width: 750px;
padding: 10px !important;
box-sizing: border-box !important;
}
.hero-section .image-section .tarot-gallery3 {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
gap: 15px !important;
width: 100% !important;
max-width: 900px;
margin: 0 auto !important;
box-sizing: border-box !important;
margin-left: 40px!important;
max-height: 650px !important;
overflow-y: auto !important;
padding: 10px 15px 10px 10px !important;
scrollbar-width: thin;
scrollbar-color: #d4af37 #1a1a1a;
}
.hero-section .image-section .tarot-gallery .tarot-gallery-item a,
.hero-section .image-section .tarot-gallery3 .tarot-gallery-item a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
background-color: rgba(255, 255, 255, 0.05);
text-decoration: none !important;
border-radius: 8px !important;
padding: 1px !important;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
border: 1px solid transparent !important;
}
.hero-section .image-section .tarot-gallery .tarot-gallery-item a img,
.hero-section .image-section .tarot-gallery3 .tarot-gallery-item a img {
border: none !important;
border-radius: 6px !important;
object-fit: cover;
width: 100% !important;
transition: transform 0.4s ease !important;
}
.tarot-card-num {
display: block !important;
color: #d4af37 !important;
font-size: 16px !important;
font-weight: bold !important;
margin-top: 28px !important;
line-height: 1 !important;
transition: all 0.3s ease !important;
}
.tarot-card-name {
display: block !important;
margin-top: -15px !important;
font-size: 13px !important;
line-height: 1.2 !important;
color: #e0e0e0 !important;
text-align: center !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
transition: color 0.3s ease !important;
}
.hero-section .image-section .tarot-gallery3 .tarot-gallery-item a:hover .tarot-card-num {
color: #fff !important;
transform: scale(1.1);
}
.hero-section .image-section .tarot-gallery3 .tarot-gallery-item a:hover {
border-color: rgba(212, 175, 55, 0.6) !important;
background-color: rgba(0, 0, 0, 0.4) !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
transform: scale(1.02) translateY(-5px) !important;
}
.hero-section .image-section .tarot-gallery3 .tarot-gallery-item a:hover .tarot-card-name {
color: #d4af37 !important;
}
.hero-section .image-section .tarot-gallery3::-webkit-scrollbar {
width: 6px;
}
.hero-section .image-section .tarot-gallery3::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.hero-section .image-section .tarot-gallery3::-webkit-scrollbar-thumb {
background-color: #d4af37;
border-radius: 4px;
}
@media (max-width: 768px) {
.hero-section .image-section .tarot-gallery3 {
margin-left: 0px!important;
max-height: none !important;
overflow-y: visible !important;
padding: 0 !important;
gap: 15px !important;
}
.tarot-card-name {
font-size: 14px !important;
}
}
.hero-section .image-section .tarot-gallery {
margin-left: 150px;
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
column-gap: 18px !important;
row-gap: 8px !important;
width: 100% !important;
max-width: 750px;
padding: 10px !important;
box-sizing: border-box !important;
}
.hero-section .image-section .tarot-gallery .tarot-gallery-item a,
.hero-section .image-section .tarot-gallery4 .tarot-gallery-item a {
display: block;
position: relative;
text-decoration: none !important;
border-radius: 8px !important;
background-color: rgba(255, 255, 255, 0.05);
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
box-shadow 0.25s ease-out,
background-color 0.25s ease-out !important;
padding: 4px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2),
inset 0px 1px 1px rgba(255, 255, 255, 0.1);
}
.hero-section .image-section .tarot-gallery .tarot-gallery-item a img,
.hero-section .image-section .tarot-gallery4 .tarot-gallery-item a img {
width: 100% !important;
max-width: 100% !important;
display: block !important;
border: none !important;
border-radius: 5px !important;
box-sizing: border-box !important;
aspect-ratio: 182 / 300;
object-fit: cover;
margin-bottom: 0 !important;
}
.hero-section .image-section .tarot-gallery .tarot-gallery-item a:hover,
.hero-section .image-section .tarot-gallery4 .tarot-gallery-item a:hover {
transform: translateY(-5px) scale(1.05) !important;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3),
inset 0px 1px 1px rgba(255, 255, 255, 0.15);
}
.hero-section .image-section .tarot-gallery .tarot-gallery-item a:active {
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25),
inset 0px 1px 2px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1200px) {
.hero-section .image-section .tarot-gallery4 {
margin-left: 0px;
}
.hero-section .image-section .tarot-gallery {
grid-template-columns: repeat(4, 1fr) !important;
max-width: 680px;
column-gap: 15px !important;
row-gap: 7px !important;
}
}
@media screen and (max-width: 992px) {
.hero-section .image-section .tarot-gallery {
grid-template-columns: repeat(4, 1fr) !important;
max-width: 580px;
column-gap: 12px !important;
row-gap: 6px !important;
}
}
@media screen and (max-width: 768px) {
.hero-section .image-section {
width: 100% !important;
padding: 0 8px !important;
margin-top: 25px !important;
}
.hero-section .image-section .tarot-gallery {
margin-left: auto !important;
margin-right: auto !important;
grid-template-columns: repeat(4, 1fr) !important;
column-gap: 10px !important;
row-gap: 5px !important;
padding: 5px !important;
max-width: 450px !important;
}
}
@media screen and (max-width: 480px) {
.hero-section .image-section .tarot-gallery {
grid-template-columns: repeat(4, 1fr) !important;
max-width: 340px !important;
column-gap: 8px !important;
row-gap: 4px !important;
}
.hero-section .image-section .tarot-gallery .tarot-gallery-item a {
padding: 3px;
}
}
.legal-menu-box {
background-color: #0a0514;
color: #bca9e0;
padding: 30px 20px;
text-align: center;
border: 1px solid #28203f;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(22, 16, 37, 0.5);
margin-top: 30px;
}
.legal-menu-box img {
display: block;
margin: 0 auto 25px auto;
max-width: 100%;
height: auto;
border-radius: 50%;
border: 3px solid #e0c998;
box-shadow: 0 0 12px rgba(224, 201, 152, 0.4),
inset 0 0 8px rgba(0, 0, 0, 0.3);
transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.35s ease;
}
.legal-menu-box img:hover {
transform: scale(1.07) rotate(3deg);
box-shadow: 0 0 20px rgba(224, 201, 152, 0.6),
inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.footer-description {
font-size: 0.9em;
line-height: 1.65;
margin-bottom: 30px;
color: #c5b8e0;
max-width: 500px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
.footer-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.footer-btn {
background-color: transparent;
color: #e0c998;
padding: 12px 25px;
text-decoration: none;
border-radius: 25px;
border: 1px solid #4a3f6f;
font-size: 0.95em;
letter-spacing: 0.5px;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
display: inline-block;
min-width: 220px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-align: center;
}
.footer-btn:hover,
.footer-btn:focus {
background-color: #382c52;
color: #ffffff;
border-color: #7b6fab;
transform: translateY(-3px) scale(1.02);
box-shadow: 0 5px 15px rgba(42, 31, 64, 0.5);
}
@media (min-width: 500px) {
.footer-buttons {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.footer-btn {
margin: 0 5px;
}
}
.cosmic-shell {
margin-top: 30px;
background-color: #0a0514;
padding: 25px 20px;
border-top: 1px solid #3a2f5a;
}
.nebula-item>.core-link {
color: #e0c998;
text-decoration: none;
display: block;
font-size: 1.15em;
font-weight: bold;
letter-spacing: 0.5px;
margin-bottom: 15px;
padding-bottom: 5px;
text-shadow: 0 0 5px rgba(224, 201, 152, 0.2);
transition: color 0.3s ease;
}
.nebula-item>.core-link:hover,
.nebula-item>.core-link:focus {
color: #ffffff;
}
.quasar-drop {
display: block !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background-color: transparent;
min-width: auto;
box-shadow: none;
border: none;
padding: 0;
margin-top: 5px;
}
.quasar-drop>a,
.quasar-drop .nova-item>.love-link {
color: #bca9e0;
padding: 9px 0;
text-decoration: none;
display: block;
font-size: 0.95em;
border-bottom: 1px dashed #28203f;
transition: color 0.2s ease, padding-left 0.25s ease, background-color 0.2s ease;
position: relative;
}
.quasar-drop>a:last-of-type,
.quasar-drop>.nova-item:last-child>.love-link {
border-bottom: none;
}
.quasar-drop>a:hover,
.quasar-drop>a:focus,
.quasar-drop .nova-item>.love-link:hover,
.quasar-drop .nova-item>.love-link:focus {
color: #ffffff;
background-color: rgba(42, 31, 64, 0.3);
padding-left: 10px;
}
.quasar-drop>a::before,
.quasar-drop .nova-item>.love-link::before {
content: "✧";
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
color: #e0c998;
transition: left 0.25s ease, opacity 0.25s ease;
font-size: 0.8em;
}
.quasar-drop>a:hover::before,
.quasar-drop>a:focus::before,
.quasar-drop .nova-item>.love-link:hover::before,
.quasar-drop .nova-item>.love-link:focus::before {
left: -5px;
opacity: 1;
}
.nova-item {
position: relative;
}
.pulsar-drop {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-left: 15px;
margin-top: 5px;
background-color: #10081a;
min-width: 230px;
z-index: 1010;
border: 1px solid #403560;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
border-radius: 4px;
padding: 6px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.nova-item:hover .pulsar-drop,
.nova-item:focus-within .pulsar-drop {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.pulsar-drop a {
color: #d0c0e8;
padding: 8px 18px;
text-decoration: none;
display: block;
font-size: 0.9em;
border-bottom: 1px solid #2c2248;
transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.pulsar-drop a:last-child {
border-bottom: none;
}
.pulsar-drop a:hover,
.pulsar-drop a:focus {
background-color: #302550;
color: #ffffff;
padding-left: 25px;
}
.social-media-footer-section .nebula-item>.core-link {
text-align: center;
margin-bottom: 20px;
}
.social-media-footer-section .quasar-drop.social-icons-container {
padding: 0 !important;
border: none !important;
box-shadow: none !important;
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
.social-icons-list-grid {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.social-icons-list-grid li {
line-height: 0;
}
.social-icons-list-grid li a {
display: inline-block;
padding: 6px;
border-radius: 50%;
transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
color: inherit !important;
font-size: inherit !important;
border-bottom: none !important;
}
.social-icons-list-grid li a::before {
content: "" !important;
display: none !important;
}
.social-icons-list-grid li a:hover,
.social-icons-list-grid li a:focus {
transform: scale(1.12);
background-color: rgba(224, 201, 152, 0.15);
box-shadow: 0 2px 8px rgba(224, 201, 152, 0.25);
padding-left: 6px !important;
}
.social-icons-list-grid li a img.social-icon {
width: 70px;
height: 70px;
display: block;
border-radius: 25%;
transition: filter 0.25s ease;
}
.social-icons-list-grid li a:hover img.social-icon,
.social-icons-list-grid li a:focus img.social-icon {
filter: brightness(1.1);
}
@media (max-width: 400px) {
.social-media-footer-section .quasar-drop.social-icons-container {
max-width: 100%;
}
.social-icons-list-grid {
gap: 10px;
}
.social-icons-list-grid li a img.social-icon {
width: 32px;
height: 32px;
}
.social-icons-list-grid li a {
padding: 5px;
}
}
@media (max-width: 768px) {
table.no-ads td ul {
margin-left: -50px !important;
}
}
.botonnormal {
margin-top: 0px;
margin-bottom: 40px !important;
width: 100%;
display: inline-block;
padding: 0px 20px 0px 20px;
font-size: 16px;
font-weight: bold;
color: white;
background-color: #FFA500;
border: none;
border-radius: 8px;
cursor: pointer;
text-align: center;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
outline: none;
}
.botonnormal:hover {
background-color: #FF8C00;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(255, 140, 0, 0.5);
transform: translateY(-2px);
}
.botonnormal:active {
background-color: #E67E22;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transform: translateY(1px);
}
.textointro {
margin-top: 30px;
margin-right: -150px;
font-weight: bold;
text-align: center !important;
}
@media (max-width: 768px) {
h3 {
text-align: center;
border-radius: 5px;
font-size: 28px !important;
line-height: 1.6;
padding-bottom: 0px;
}
.textointro {
margin-top: -50px;
margin-right: -0px;
font-weight: bold;
text-align: center !important;
}
}
.mystic-stars-wrapper {
display: inline-flex;
gap: 7px;
align-items: center;
justify-content: center;
padding: 15px 10px;
background: transparent;
position: relative;
margin: 0px 0;
content-visibility: auto;
contain-intrinsic-size: auto 100px;
contain: layout style paint;
}
.tarot-card-module {
margin: 40px auto;
max-width: 1200px;
padding: 30px 20px;
background: linear-gradient(135deg, #1a0033 0%, #2d1b4e 50%, #1a0033 100%);
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
inset 0 0 20px rgba(138, 43, 226, 0.1);
position: relative;
overflow: hidden;
border: 2px solid rgba(138, 43, 226, 0.3);
content-visibility: auto;
contain-intrinsic-size: auto 800px;
}
.naipes-seccion-carta {
background: radial-gradient(ellipse at center, #2a1d35 0%, #1c0f24 100%);
color: #d4c2e0;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 50px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
inset 0 0 15px rgba(230, 200, 255, 0.1);
border: 1px solid rgba(180, 150, 220, 0.25);
position: relative;
overflow: hidden;
}
.naipes-titulo-carta {
display: inline-block;
padding-bottom: 15px;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
color: #f5eaff;
font-size: clamp(22px, 3.5vw, 28px);
font-weight: 700;
letter-spacing: 1.2px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 10px rgba(200, 160, 255, 0.3);
text-align: center;
width: 100%;
}
.naipes-titulo-carta::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 55%;
height: 2px;
background: linear-gradient(to right, transparent, #c8a0ff, #f5eaff, #c8a0ff, transparent);
border-radius: 1px;
box-shadow: 0 0 8px rgba(200, 160, 255, 0.5);
}
.naipes-fila-contenido {
display: flex;
flex-wrap: wrap;
gap: 25px;
align-items: flex-start;
}
.naipes-columna {
flex: 1;
min-width: 280px;
padding: 15px;
background-color: rgba(255, 255, 255, 0.03);
border-radius: 8px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.naipes-descripcion-principal,
.naipes-descripcion-adicional {
font-size: 18px;
line-height: 1.75;
margin-bottom: 15px;
color: #fff;
text-align: left;
}
.naipes-columna-descripcion strong,
.naipes-columna-claves strong {
color: #f5eaff;
font-weight: 600;
}
.naipes-subtitulo-claves-texto {
display: block;
font-size: 19px;
color: #e5d5f0;
font-weight: 800;
padding-top: 2px;
text-align: center;
letter-spacing: .5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.naipes-lista-claves {
list-style-type: none;
padding-left: 0;
margin-bottom: 20px;
text-align: left;
}
.naipes-lista-claves li {
padding-left: 15px !important;
position: relative;
margin-bottom: 10px;
color: #ffffff !important;
line-height: 2 !important;
}
.naipes-lista-claves li strong {
font-size: 17px;
color: #fffcd0;
letter-spacing: 0.7px;
text-shadow: 0 0 5px rgba(224, 197, 110, 0.5)
}
.naipes-lista-claves li::before {
content: '✧';
position: absolute;
left: -18px;
top: 5px;
color: #e0c56e;
font-size: 25px;
line-height: 1;
text-shadow: 0 0 5px rgba(224, 197, 110, 0.5)
}
.naipes-emoji {
margin-right: 8px;
}
.naipes-boton-contenedor {
text-align: center;
margin-bottom: 25px;
margin-top: -10px;
}
.naipes-boton-enlace {
display: inline-block;
padding: 15px 25px;
font-weight: bold;
font-size: 17px;
color: #000000;
background: #ffb75e;
border-radius: 25px;
text-decoration: none;
box-shadow: 0 4px 10px rgba(255, 160, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.naipes-boton-enlace:hover {
background: #ff8c00;
box-shadow: 0 6px 15px rgba(255, 160, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.3);
transform: translateY(-2px) scale(1.02);
}
@media (max-width: 768px) {
.naipes-seccion-carta {
padding: 8px;
}
.naipes-titulo-carta {
margin-top: -0px !important;
margin-bottom: 15px !important;
}
.naipes-fila-contenido {
gap: 1px;
}
.naipes-columna {
padding: 10px;
}
.naipes-subtitulo-claves-texto {
padding-top: 10px;
font-size: 19px;
}
}
.margen {
padding-top: 10px;
padding-bottom: 20px;
margin-top: -32px;
}
.naipes-seccion-carta .article-loop a,
.naipes-seccion-carta .asap-clusters-article-link {
background: #f2f2f2;
color: #333333;
border: 4px solid #ffb75e;
border-radius: 16px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
margin: 10px 0;
padding: 10px 15px;
display: block;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
}
.mtca-combinador-container {
background-color: #1a1a2e;
color: #e0e0e0;
padding: 30px;
border-radius: 15px;
border: 2px solid #c0b283;
box-shadow: 0 0 25px rgba(200, 178, 131, 0.9);
max-width: auto;
margin: 20px auto;
overflow-x: hidden;
}
.mtca-selectors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
perspective: 1000px;
}
.mtca-card-selector {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(255, 255, 255, 0.03);
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
padding-top: 0px;
border-radius: 20px;
border: 2px solid #4a4a68;
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.mtca-shuffling .mtca-card-image-preview img {
animation: shuffleEffect 0.5s infinite alternate ease-in-out;
}
.mtca-shuffling .mtca-selector-title {
animation: pulseText 1s infinite alternate;
}
@keyframes shuffleEffect {
0% {
transform: translateY(0) rotateZ(0deg) scale(1);
opacity: 0.8;
}
25% {
transform: translateY(5px) rotateZ(10deg) scale(0.98);
opacity: 1;
}
50% {
transform: translateY(-2px) rotateZ(20deg) scale(1.01);
opacity: 0.9;
}
75% {
transform: translateY(-5px) rotateZ(-340deg) scale(0.82);
opacity: 0.6;
}
100% {
transform: translateY(0) rotateZ(-360deg) scale(1);
opacity: 0.7;
}
}
.mtca-shuffling .mtca-card-image-preview img {
animation: shuffleEffect 3s infinite alternate ease-in-out;
}
@keyframes pulseText {
from {
color: #d4af37;
}
to {
color: #f0e68c;
}
}
.mtca-selector-title {
color: #d4af37;
font-size: 1.6em;
padding-top: 15px;
font-weight: 600;
letter-spacing: 1px;
}
.mtca-select {
width: 100%;
padding: 12px 15px;
margin-bottom: 15px;
border: 1px solid #c0b283;
border-radius: 5px;
background-color: #2c2c44;
color: #e0e0e0;
font-size: 1em;
cursor: pointer;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
margin-top: -22px;
margin-bottom: 30px;
}
.mtca-select:focus {
outline: none;
border-color: #d4af37;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
.mtca-card-image-preview {
width: 70%;
height: 320px;
border: 2px dashed #4a4a68;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.1);
position: relative;
margin-bottom: 20px;
}
.mtca-card-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 6px;
transition: opacity 0.3s ease;
}
.mtcm-hidden {
display: none !important;
opacity: 0;
}
.mtca-submit-area,
.mtca-result-area {
width: 100%;
text-align: center;
margin-top: 20px;
}
.mtca-button {
background-color: #ff8200;
color: #000000;
border: none;
padding: 12px 30px;
font-weight: 600;
font-size: 1.4em;
letter-spacing: 1px;
border-radius: 15px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
animation-name: palpitarBoton;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.mtca-button:hover,
.mtca-button:focus {
background-color: #d4af37;
color: #000;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.mtca-button:disabled {
background-color: #525264;
color: #888;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.mtca-message {
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
text-align: center;
font-size: 0.95em;
}
.mtca-error {
background-color: #5c252f;
color: #f8d7da;
border: 1px solid #e48a96;
}
.mtca-info {
background-color: #2e4057;
color: #d1ecf1;
border: 1px solid #7ab9cc;
}
.mtca-info strong {
color: #f0e68c;
}
@keyframes palpitarBoton {
0% {
transform: scale(1);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 18px rgba(212, 175, 55, 0.8);
}
100% {
transform: scale(1);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
}
@media (max-width: 767px) {
.mtca-card-image-preview {
width: 130px;
height: 180px;
border-radius: 6px;
}
.mtca-card-img {
max-width: 120px;
max-height: 180px;
object-fit: contain;
border-radius: 6px;
transition: opacity 0.3s ease;
}
.mtca-selector-title {
color: #d4af37;
padding-top: 15px;
padding-bottom: 10px;
font-weight: 600;
letter-spacing: 1px;
}
.mtca-combinador-container {
padding: 15px 5px;
margin: 15px auto;
border-radius: 10px;
}
.mtca-selectors-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 10px;
margin-top: 5px;
}
.mtca-card-selector {
margin-bottom: 10px;
padding: 2px 5px 0px 5px;
border-radius: 5px;
}
.mtca-selector-title {
font-size: 1em !important;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.mtca-select {
padding: 10px 12px;
font-size: 0.85em;
margin-bottom: 15px;
}
.mtca-button {
padding: 10px 20px;
font-size: 1.15em;
letter-spacing: 0.5px;
border-radius: 10px;
}
.mtca-message {
padding: 10px;
font-size: 0.9em;
}
@keyframes shuffleEffect {
0% {
transform: translateY(0) rotateZ(0deg) scale(1);
opacity: 0.8;
}
25% {
transform: translateY(3px) rotateZ(5deg) scale(0.99);
opacity: 1;
}
50% {
transform: translateY(-1px) rotateZ(10deg) scale(1.005);
opacity: 0.9;
}
75% {
transform: translateY(-3px) rotateZ(-350deg) scale(0.90);
opacity: 0.6;
}
100% {
transform: translateY(0) rotateZ(-360deg) scale(1);
opacity: 0.7;
}
}
}
#introduccion-oraculo p {
font-size: 1.15em;
line-height: 1.65;
}
.tapete-mistico {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
margin-top: 35px;
perspective: 1200px;
}
.naipe-arcano {
width: 100px;
height: 170px;
border-radius: 4px;
cursor: pointer;
transition: transform 0.4s ease, box-shadow 0.4s ease;
background-size: cover;
background-position: center;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
border: 2px solid #3a506b;
}
.naipe-arcano:hover {
transform: translateY(-12px) scale(1.08);
box-shadow: 0 10px 35px rgba(255, 164, 27, 0.3);
border-color: #ffa41b;
}
.naipe-arcano.seleccionado {
transform: scale(1.25);
z-index: 100;
}
.naipe-arcano.desvanecido {
transform: scale(0);
opacity: 0;
transition: transform 0.6s ease, opacity 0.6s ease;
}
.veredicto-arcano {
display: none;
flex-direction: column;
align-items: center;
margin-top: 35px;
}
#arcano-protagonista {
margin-bottom: 25px;
}
#mensaje-clarividente {
background-color: rgba(8, 8, 8, 0.1);
padding: 25px;
border-radius: 9px;
max-width: 650px;
font-size: 1.25em;
line-height: 1.75;
text-align: center;
border-top: 3px solid #ffa41b;
opacity: 0;
transform: translateY(25px);
transition: opacity 0.9s ease 0.6s, transform 0.9s ease 0.6s;
}
#sentencia-directa {
font-size: 1.8em;
font-weight: bold;
color: #ffa41b;
margin: 20px 0;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s;
}
#sentencia-directa.mostrado {
opacity: 1;
transform: scale(1);
}
#mensaje-clarividente.mostrado {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 600px) {
.naipe-arcano {
width: 45px;
height: 75px;
gap: 12px;
}
#introduccion-oraculo h2 {
font-size: 1.6em;
}
}
#tsn-app-container {
--tsn-app-bg-color: #0d0a1a;
--tsn-app-card-width: 110px;
--tsn-app-card-height: 180px;
--tsn-app-glow-color-selected: #f0e68c;
--tsn-app-glow-color-hover: rgba(255, 255, 255, 0.7);
--tsn-app-text-color: #f1f1f1;
box-sizing: border-box;
background-color: var(--tsn-app-bg-color);
padding: 2em;
border-radius: 15px;
text-align: center;
overflow: hidden;
font-family: var(--tsn-app-font-family);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
border: 1px solid var(--tsn-app-glow-color-selected);
position: relative;
min-height: 560px;
max-height: 560px;
}
#tsn-app-container .tsn-app-welcome-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
color: var(--tsn-app-text-color);
animation: tsn-app-fadeInUp 1s ease;
}
#tsn-app-container .tsn-app-welcome-screen p {
color: white;
font-size: 1.8em;
margin-top: 1.5em;
}
#tsn-app-container .tsn-app-start-button,
#tsn-app-container .tsn-app-restart-button {
padding: 12px 25px;
font-size: 1.2em;
cursor: pointer;
border: 1px solid var(--tsn-app-glow-color-selected);
background-color: transparent;
color: var(--tsn-app-glow-color-selected);
border-radius: 5px;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
#tsn-app-container .tsn-app-start-button:hover,
#tsn-app-container .tsn-app-restart-button:hover {
background-color: var(--tsn-app-glow-color-selected);
color: var(--tsn-app-bg-color);
transform: scale(1.05);
}
#tsn-app-container .tsn-app-game-area {
display: flex !important;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100%;
box-sizing: border-box;
}
#tsn-app-container .tsn-app-prompt {
color: var(--tsn-app-text-color);
font-size: 1.6em;
margin-bottom: 1.8em;
transition: opacity 1s ease;
}
#tsn-app-container .tsn-app-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(var(--tsn-app-card-width), 1fr));
gap: 20px;
justify-items: center;
perspective: 1000px;
width: 100%;
}
#tsn-app-container .tsn-app-grid[style*="opacity: 0"] {
display: none !important;
}
#tsn-app-container #tsn-app-final-choice-area {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
width: 100%;
gap: 20px;
}
#tsn-app-container .tsn-app-card {
width: var(--tsn-app-card-width) !important;
height: var(--tsn-app-card-height) !important;
position: relative;
cursor: pointer;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.8s ease, opacity 2s ease, filter 2s ease;
transform-style: preserve-3d;
opacity: 0;
margin: 10px;
animation: tsn-app-fadeInUp 1.5s ease forwards, tsn-app-idle-glow 4s infinite 1.5s ease-in-out;
}
#tsn-app-container .tsn-app-card:not(.tsn-app-is-selected):hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 0 20px var(--tsn-app-glow-color-hover);
animation-play-state: paused;
}
#tsn-app-container .tsn-app-card.tsn-app-is-selected {
opacity: 1 !important;
transform: scale(1.2);
animation: tsn-app-pulseGlow 1.5s infinite;
}
#tsn-app-container .tsn-app-card.tsn-app-is-disappearing {
opacity: 0 !important;
pointer-events: none;
transform: scale(0.8) translateY(20px);
filter: blur(5px);
animation: none;
}
#tsn-app-container .tsn-app-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
}
#tsn-app-container .tsn-app-card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
overflow: hidden;
}
#tsn-app-container .tsn-app-card-face img {
width: 100%;
height: 100%;
object-fit: cover;
}
#tsn-app-container .tsn-app-card-front {
transform: rotateY(180deg);
}
#tsn-app-container .tsn-app-result {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
animation: tsn-app-fadeInUp 2.5s ease;
color: var(--tsn-app-text-color);
}
#tsn-app-container .tsn-app-result-content {
display: flex;
align-items: center;
justify-content: center;
gap: 3em;
width: 100%;
max-width: 1000px;
margin-top: 40px;
margin-bottom: 1em;
}
#tsn-app-container .tsn-app-text-column {
flex: 1;
text-align: left;
}
#tsn-app-container .tsn-app-final-card-wrapper {
flex-shrink: 0;
margin-bottom: 0;
}
#tsn-app-container .tsn-app-final-card-image {
width: calc(var(--tsn-app-card-width) * 1.5);
height: calc(var(--tsn-app-card-height) * 1.5);
border-radius: 10px;
box-shadow: 0 0 20px var(--tsn-app-glow-color-selected);
}
#tsn-app-container .tsn-app-final-card-name,
#tsn-app-container .tsn-app-final-answer,
#tsn-app-container .tsn-app-final-explanation {
margin-left: 0;
text-align: center;
margin-right: 0;
max-width: none;
}
#tsn-app-container .tsn-app-final-card-name {
font-size: 1.8em !important;
font-weight: bold !important;
margin-bottom: 0.5em !important;
color: var(--tsn-app-text-color) !important;
line-height: 1.2 !important;
}
#tsn-app-container .tsn-app-final-answer {
font-size: 3em !important;
margin: 0.2em 0 !important;
color: var(--tsn-app-glow-color-selected) !important;
font-weight: bold !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
#tsn-app-container .tsn-app-final-explanation {
font-size: 1.2em !important;
line-height: 1.7 !important;
margin: 1em 0 0 0 !important;
font-style: italic !important;
color: var(--tsn-app-text-color) !important;
}
#tsn-app-container .tsn-app-restart-button {
margin-top: 2em;
}
@keyframes tsn-app-fadeInUp {
from {
opacity: 0;
transform: translateY(40px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes tsn-app-pulseGlow {
0% {
box-shadow: 0 0 30px var(--tsn-app-glow-color-selected);
}
50% {
box-shadow: 0 0 60px var(--tsn-app-glow-color-selected), 0 0 10px #ffffff;
}
100% {
box-shadow: 0 0 30px var(--tsn-app-glow-color-selected);
}
}
@keyframes tsn-app-idle-glow {
0% {
box-shadow: 0 0 7px rgba(240, 230, 140, 0.2);
}
50% {
box-shadow: 0 0 15px rgba(240, 230, 140, 0.5);
}
100% {
box-shadow: 0 0 7px rgba(240, 230, 140, 0.2);
}
}
@media (max-width: 768px) {
#tsn-app-container {
--tsn-app-card-width: 80px;
--tsn-app-card-height: 130px;
padding: 1.5em 1em;
min-height: auto;
max-height: none;
}
#tsn-app-container .tsn-app-grid {
gap: 10px;
}
#tsn-app-container .tsn-app-card {
margin: 5px;
}
#tsn-app-container .tsn-app-welcome-screen p {
font-size: 1.4em;
}
#tsn-app-container .tsn-app-prompt {
font-size: 1.2em;
margin-bottom: 1.5em;
}
#tsn-app-container .tsn-app-start-button,
#tsn-app-container .tsn-app-restart-button {
font-size: 1em;
padding: 10px 20px;
}
#tsn-app-container .tsn-app-result-content {
flex-direction: column;
gap: 1.5em;
margin-top: 20px;
}
#tsn-app-container .tsn-app-text-column {
text-align: center;
order: 2;
}
#tsn-app-container .tsn-app-final-card-wrapper {
order: 1;
}
#tsn-app-container .tsn-app-final-card-name {
font-size: 1.5em !important;
}
#tsn-app-container .tsn-app-final-answer {
font-size: 2.2em !important;
}
#tsn-app-container .tsn-app-final-explanation {
font-size: 1.1em !important;
}
}
@media (max-width: 768px) {
.solotexto {
padding-top: 40px !important;
}
.solocarta .tfx-title {
padding-bottom: 15px !important;
font-size: 1.4em !important;
letter-spacing: 0.1px;
line-height: 3.3rem;
}
.solocarta {
margin-top: -15px;
}
}
.solotexto {
padding-top: 30px;
}
.solocarta .tfx-title {
padding-bottom: 30px;
font-size: 1.5em;
}
.solocarta p {
color: #fff;
}
.tfx-double-deck {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
padding: 0 20px;
}
.tfx-card-unit {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.tfx-title {
color: #e9e4f0;
font-family: fantasy;
font-size: 2em;
font-weight: normal;
text-align: center;
transition: transform 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
}
.ajustes .tfx-title {
color: #e9e4f0;
font-family: fantasy;
font-size: 1.5em;
font-weight: normal;
text-align: center;
transition: transform 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
}
.tfx-card-flipper {
width: 192px;
height: 280px;
position: relative;
perspective: 1500px;
transform-style: preserve-3d;
transition: transform 0.4s ease-out;
}
.tfx-card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform 1.7s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.4s ease;
border-radius: 15px;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.1);
}
.tfx-card-face img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tfx-card-back {
transform: rotateY(0deg);
}
.tfx-card-front {
transform: rotateY(180deg);
}
.tfx-card-unit:hover .tfx-title {
color: #FFFFFF;
transform: scale(1.1);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.tfx-card-unit:hover .tfx-card-flipper {
transform: translateY(-15px);
}
.tfx-card-unit:hover .tfx-card-face {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px 5px rgba(255, 215, 0, 0.8);
}
.tfx-card-unit:hover .tfx-card-back {
transform: rotateY(-180deg);
}
.tfx-card-unit:hover .tfx-card-front {
transform: rotateY(0deg);
}
.tfx-card-unit::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background-color: transparent;
border-radius: 50%;
box-shadow: 0 0 8px 3px rgba(255, 255, 220, 0.9);
pointer-events: none;
z-index: 10;
animation: move-star 15s infinite ease-in-out;
}
.tfx-card-unit:nth-child(2)::before {
animation-delay: -7s;
}
@keyframes move-star {
0% {
transform: translate(-150px, -200px);
opacity: 0;
}
10% {
opacity: 1;
}
25% {
transform: translate(160px, -100px);
}
50% {
transform: translate(80px, 220px);
}
75% {
transform: translate(-170px, 100px);
}
90% {
opacity: 1;
}
100% {
transform: translate(-150px, -200px);
opacity: 0;
}
}
@media (max-width: 768px) {
.hero-section .ajustes p {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.hero-section .ajustes ul li,
.hero-section .ajustes ol li {
font-size: 0.9rem;
}
.tfx-double-deck {
gap: 15px;
flex-wrap: nowrap;
}
.tfx-card-flipper {
width: 160px;
height: 233px;
}
.tfx-title {
font-size: 1.3em;
}
.solocarta .tfx-card-front {
transform: rotateY(0deg);
}
.solocarta .tfx-card-back {
transform: rotateY(-180deg);
}
.tfx-card-unit::before {
animation-name: move-star-mobile;
}
@keyframes move-star-mobile {
0% {
transform: translate(-80px, -130px);
opacity: 0;
}
10% {
opacity: 1;
}
25% {
transform: translate(90px, -70px);
}
50% {
transform: translate(50px, 140px);
}
75% {
transform: translate(-90px, 70px);
}
90% {
opacity: 1;
}
100% {
transform: translate(-80px, -130px);
opacity: 0;
}
}
.tfx-card-unit:hover .tfx-card-back {
transform: rotateY(0deg);
}
.tfx-card-unit:hover .tfx-card-front {
transform: rotateY(180deg);
}
}
.naipes-seccion-adicional {
padding: 10px 15px;
margin-top: 20px;
border-top: 1px solid rgba(180, 150, 220, 0.15);
}
.naipes-seccion-frase {
text-align: center;
margin-top: 25px;
padding: 0 15px;
}
.naipes-titulo-frase {
display: inline-block;
padding-bottom: 12px;
margin-bottom: 15px;
position: relative;
font-size: clamp(18px, 2.8vw, 22px);
font-weight: 600;
letter-spacing: 1px;
color: #e0c56e;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(224, 197, 110, 0.4);
}
.naipes-titulo-frase::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 50%;
height: 1.5px;
background: linear-gradient(to right, transparent, #e0c56e, #fff8dc, #e0c56e, transparent);
border-radius: 1px;
box-shadow: 0 0 6px rgba(224, 197, 110, 0.6);
}
.naipes-frase-destacada {
font-size: 1.3rem;
font-style: italic;
color: #d4c2e0;
margin: 0 auto 20px auto;
padding: 1px 20px;
border-left: 3px solid #e0c56e;
background-color: rgba(0, 0, 0, 0.1);
max-width: 90%;
border-radius: 0 8px 8px 0;
}
.naipes-frase-destacada cite {
display: block;
text-align: right;
margin-top: -20px;
font-size: 1rem;
font-style: normal;
color: #b3a1c4;
}
.naipes-seccion-puntuacion {
margin-top: 0px;
padding: 15px 25px;
background-color: rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(180, 150, 220, 0.15);
}
.naipes-puntuacion-contenedor {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.naipes-puntuacion-item {
text-align: center;
flex: 1;
min-width: 100px;
}
.puntuacion-categoria {
display: block;
font-size: 16px;
font-weight: 700;
color: #e5d5f0;
margin-bottom: -15px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.puntuacion-estrellas {
font-size: 24px;
line-height: 1;
}
.estrella-llena {
color: #ffc107;
text-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
}
.estrella-vacia {
color: #5a4b69;
}
:root {
--color-dark-purple: #2c0b3e;
--color-medium-purple: #4a148c;
--color-light-purple-glow: #7e57c2;
--color-gold: #ffd700;
--color-dark-gold: #b8860b;
--color-almost-black: #1a1a1a;
--color-light-text: #e0e0e0;
--font-primary: 'Cinzel', serif;
--font-secondary: 'Poppins', sans-serif;
}
.magic-oracle-container {
background: linear-gradient(145deg, var(--color-almost-black) 0%, var(--color-dark-purple) 100%);
color: var(--color-light-text);
padding: 30px;
border-radius: 32px;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.7),
0 0 18px var(--color-gold),
0 0 30px var(--color-light-purple-glow),
inset 0 0 15px rgba(26, 26, 26, 0.6);
border: 1px solid var(--color-dark-gold);
max-width: 480px;
margin: 30px auto;
position: relative;
overflow: hidden;
text-align: center;
content-visibility: auto;
contain: layout style paint;
contain-intrinsic-size: auto 600px;
}
.magic-oracle-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(ellipse at center, rgba(255, 215, 0, 0.08) 0%, transparent 60%),
radial-gradient(var(--color-gold) 0.4px, transparent 0.4px),
radial-gradient(var(--color-medium-purple) 0.4px, transparent 0.4px);
background-size: 100% 100%, 35px 35px, 55px 55px;
background-position: center center, 0 0, 27px 27px;
opacity: 0.15;
pointer-events: none;
animation: sparkle 5s linear infinite, subtleGlow 10s ease-in-out infinite alternate;
z-index: 0;
}
.magic-oracle-content {
position: relative;
z-index: 1;
}
@keyframes sparkle {
from {
background-position: center center, 0 0, 27px 27px;
}
to {
background-position: center center, 350px 350px, 377px 377px;
}
}
@keyframes subtleGlow {
from {
opacity: 0.1;
}
to {
opacity: 0.25;
}
}
.magic-oracle-header .oracle-title {
color: var(--color-gold);
font-size: 1.8em;
font-weight: 700;
text-shadow: 0 0 8px var(--color-gold), 0 0 4px var(--color-dark-purple);
padding-bottom: 20px;
margin-bottom: 0px !important;
}
.magic-oracle-header .oracle-subtitle {
font-size: 1.0em;
color: #c5a6ff;
margin: 0 0 15px 0;
}
#magic-oracle-form {
display: flex;
flex-direction: column;
gap: 22px;
}
#user-question {
background-color: rgba(0, 0, 0, 0.35);
color: var(--color-light-text);
border: 1px solid var(--color-medium-purple);
border-radius: 6px;
padding: 10px 12px;
font-size: 1.05em;
font-family: var(--font-secondary);
resize: vertical;
min-height: 60px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#user-question:focus {
outline: none;
border-color: var(--color-gold);
box-shadow: 0 0 8px var(--color-gold), inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
#user-question::placeholder {
color: #a093b3;
opacity: 0.6;
}
#submit-question {
background: linear-gradient(145deg, var(--color-gold), var(--color-dark-gold));
color: var(--color-almost-black);
font-weight: 700;
font-size: 1.2em;
padding: 10px 18px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease-out;
letter-spacing: 2px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
}
#submit-question:hover,
#submit-question:focus {
background: linear-gradient(145deg, var(--color-dark-gold), var(--color-gold));
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45), 0 0 12px var(--color-gold);
transform: translateY(-1px);
color: #000;
}
#submit-question:active {
transform: translateY(0px);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#magic-oracle-mystic-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(26, 26, 26, 0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0s 0.5s;
}
#magic-oracle-mystic-loading.visible {
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, visibility 0s 0s;
}
.mystic-animation-zone {
position: relative;
width: 150px;
height: 100px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.tarot-card {
width: 40px;
height: 60px;
background-color: var(--color-dark-purple);
border: 1px solid var(--color-dark-gold);
border-radius: 4px;
position: absolute;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
background-image: linear-gradient(45deg, var(--color-medium-purple) 25%, transparent 25%, transparent 50%, var(--color-medium-purple) 50%, var(--color-medium-purple) 75%, transparent 75%, transparent);
background-size: 10px 10px;
}
.tarot-card:nth-child(1) {
transform: rotate(-10deg) translateX(-15px);
animation: shuffleCard1 5s infinite ease-in-out;
}
.tarot-card:nth-child(2) {
transform: rotate(0deg);
animation: shuffleCard2 5s infinite ease-in-out;
z-index: 1;
}
.tarot-card:nth-child(3) {
transform: rotate(10deg) translateX(15px);
animation: shuffleCard3 5s infinite ease-in-out;
}
@keyframes shuffleCard1 {
0%,
100% {
transform: rotate(-10deg) translateX(-15px) translateY(0px);
}
50% {
transform: rotate(5deg) translateX(-10px) translateY(-5px);
}
}
@keyframes shuffleCard2 {
0%,
100% {
transform: rotate(0deg) translateY(0px);
}
50% {
transform: rotate(-5deg) translateY(5px) scale(1.05);
}
}
@keyframes shuffleCard3 {
0%,
100% {
transform: rotate(10deg) translateX(15px) translateY(0px);
}
50% {
transform: rotate(-10deg) translateX(10px) translateY(-5px);
}
}
.mystic-glow {
position: absolute;
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(255, 215, 0, 0) 70%);
border-radius: 50%;
animation: pulseGlow 2.5s infinite alternate ease-in-out;
z-index: 0;
}
@keyframes pulseGlow {
from {
transform: scale(0.8);
opacity: 0.5;
}
to {
transform: scale(1.2);
opacity: 1;
}
}
#magic-oracle-mystic-loading .loading-text {
font-family: var(--font-secondary);
font-size: 0.9em;
color: var(--color-light-text);
text-shadow: 0 0 5px var(--color-gold);
margin-top: 15px;
}
#magic-oracle-revelation-area {
position: relative;
z-index: 1;
margin-top: 20px;
padding: 10px;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
perspective: 800px;
}
#magic-oracle-answer {
font-family: var(--font-primary);
font-size: 1.55em;
font-weight: 700;
color: var(--color-gold);
padding: 20px 25px;
background-color: rgba(10, 0, 20, 0.5);
border-radius: 8px;
border: 1px solid var(--color-dark-gold);
text-shadow: 0 0 10px var(--color-gold), 0 0 5px var(--color-dark-purple);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(74, 20, 140, 0.3);
opacity: 0;
transform: translateY(30px) scale(0.9);
transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
#magic-oracle-answer.revealed {
opacity: 1;
transform: translateY(0px) scale(1);
}
.galeria-bastos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 30px;
padding: 20px;
justify-items: center;
}
.galeria-bastos {
position: relative;
}
.galeria-bastos::before {
content: "";
position: absolute;
top: 110px;
left: -15px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #333;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
animation: pulse 0.3s ease-in-out infinite alternate;
}
@keyframes pulse {
from {
transform: translateY(0) scale(1);
opacity: 1;
}
to {
transform: translateY(-10px) scale(1.2);
opacity: 0.8;
}
}
.galeria-bastos-item {
border: 4px ridge #e0e0e0;
border-radius: 8px;
width: 100%;
aspect-ratio: 180/300;
background-color: #0D0A12;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 10px 7px rgba(0, 0, 0, 0.3),
0px 0px 10px rgba(180, 150, 90, 0.15);
transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
box-shadow 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
position: relative;
cursor: pointer;
}
.galeria-bastos-item a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.galeria-bastos-item img {
padding-top: 0px;
object-fit: cover;
transition: transform 1110.4s ease-out;
transform: translateY(-23px);
}
.galeria-bastos-item:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35),
0px 0px 20px rgba(224, 194, 120, 0.4),
0 0 5px rgba(255, 230, 180, 0.3) inset;
z-index: 10;
}
.galeria-bastos-item:hover img {
transform: scale(1.03);
}
.galeria-bastos-item a:focus-visible {
outline: none;
}
.galeria-bastos-item:has(a:focus-visible) {
transform: translateY(-5px) scale(1.05);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35),
0px 0px 20px rgba(100, 150, 255, 0.6),
0 0 5px rgba(180, 220, 255, 0.4) inset;
outline: 2px solid #E0C278;
z-index: 10;
}
.galeria-bastos-item:has(a:focus-visible) img {
transform: scale(1.03);
}
@media (max-width: 1024px) {
.galeria-bastos {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 12px;
}
}
@media (max-width: 768px) {
.galeria-bastos {
grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
gap: 12px;
}
.galeria-bastos-item:hover {
transform: translateY(-3px) scale(1.03);
}
.galeria-bastos-item:has(a:focus-visible) {
transform: translateY(-3px) scale(1.03);
}
.galeria-bastos::before {
display: none;
}
}
.sidebar-tarot-widget .tfx-double-deck {
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
gap: 15px;
padding: 10px;
}
.sidebar-tarot-widget .tfx-title {
color: #111111;
font-size: 1.2em;
margin-bottom: 8px;
}
.sidebar-tarot-widget .tfx-card-unit:hover .tfx-title {
color: #000000;
text-shadow: none;
}
.sidebar-tarot-widget .tfx-card-flipper {
width: 120px;
height: 175px;
}
.sidebar-tarot-widget .tfx-card-unit:hover .tfx-card-flipper {
transform: translateY(-5px);
}
.sidebar-tarot-widget .tfx-card-unit::before {
animation-name: move-star-widget;
animation-duration: 12s;
}
@keyframes move-star-widget {
0% {
transform: translate(-70px, -110px);
opacity: 0;
}
10% {
opacity: 1;
}
25% {
transform: translate(80px, -60px);
}
50% {
transform: translate(50px, 120px);
}
75% {
transform: translate(-80px, 60px);
}
90% {
opacity: 1;
}
100% {
transform: translate(-70px, -110px);
opacity: 0;
}
}
@media (max-width: 767px) {
.noticias table th,
.noticias table td {
font-size: 17px !important;
}
}
@media screen and (max-width: 768px) {
.widget-astrolabio {
overflow: hidden !important;
}
.widget-astrolabio .oracle-wrapper {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
max-width: 320px !important;
max-height: 320px !important;
left: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
position: relative !important;
}
.widget-astrolabio .oracle-body {
width: 75% !important;
height: 75% !important;
margin-top: 70px !important;
}
.widget-astrolabio .form-title {
font-size: 1em;
line-height: 1.5;
margin-bottom: 15px;
}
.widget-astrolabio .subscription-form input[type="email"] {
font-size: 1em;
}
.widget-astrolabio .subscription-form button[type="submit"] {
padding: 10px 24px;
font-size: 0.75em;
}
}
.hero-section .content-cluster {
width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
padding-left: 0;
padding-right: 0;
}
@media (max-width: 768px) {
.hero-section .content-cluster {
width: 90%;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
max-width: 500px;
}
}
.hero-section .entry-title {
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.hero-section .article-loop img {
border-radius: 1px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-tarot-tipos-list.force-scrollbar {
overflow-x: scroll !important;
}
.menu-tarot-tipos-list.force-scrollbar::-webkit-scrollbar {
height: 6px !important;
}
.menu-tarot-tipos-list.force-scrollbar::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 10px;
}
.menu-tarot-tipos-list.force-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.4) !important;
border-radius: 10px;
}
.menu-tarot-tipos-list.force-scrollbar {
scrollbar-width: thin !important;
scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1) !important;
}
@media (max-width: 768px) {
.subir-titulo-movil {
margin-top: -35px;
}
.subir-titulo-movil h1 {
margin-top: 0px;
}
}
.subir-titulo-movil h1 {
margin-top: -50px !important;
line-height: 1.6 !important;
}
@media (max-width: 768px) {
.tfx-double-deck {
flex-direction: column;
align-items: center;
gap: 30px;
}
.arriba1 {
margin-top: -60px;
padding-bottom: 40px;
}
.abajo1 {
margin-bottom: 10px;
}
}
.text-section table {
margin-bottom: 25px;
color: #ffffff;
font-size: 16px;
}
.text-section table thead th {
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6), 0 0 12px rgba(255, 255, 255, 0.0);
color: white !important;
font-weight: 700;
line-height: 1.4;
text-align: center;
letter-spacing: 1px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 20px;
padding-top: 20px;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
color: #FFD700;
font-size: 22px;
letter-spacing: 1px;
border-bottom: 1px solid;
border-top: 1px solid;
}
.text-section table tbody td {
padding: 14px 15px;
border-bottom: 1px solid rgba(218, 165, 32, 0.5);
transition: background-color 0.3s ease;
background: transparent;
}
.text-section table tbody td strong {
color: #EAEAEA;
}
.text-section table tbody tr:last-child td {
border-bottom: none;
}
.card img {
width: 170px;
}
.card .back-card.rotate {
width: 150px;
}
.card .hidden-card,
.card .hidden-card.rotate-in,
.card .back-card,
.card .back-card.rotate {
transition-duration: 0.45s;
}
.card .back-card {
border-radius: 12px;
box-shadow: 0 0 10px 2px rgba(255, 220, 150, 0.3);
transition: box-shadow 0.3s ease, opacity 0.3s ease;
}
.card a:hover .back-card {
box-shadow: 0 0 20px 5px rgba(255, 220, 150, 0.6);
}
.card .hidden-card.rotate-in {
box-shadow: none !important;
border-radius: 12px;
}
@media screen and (max-width: 767px) {
#tarot-modal-contenido .cartas-en-modal,
#tarot-modal-contenido .cartas-segunda-seleccion,
#tarot-modal-contenido .cartas-consejo-seleccion {
gap: 8px !important;
padding: 5px 5px !important;
grid-template-columns: repeat(2, 1fr) !important;
}
#modal-cerrar-btn {
top: 0px !important;
right: -2px !important;
width: 44px !important;
height: 44px !important;
font-size: 1.8rem !important;
background: rgba(0, 0, 0, 0.5) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
#tarot-modal-contenido {
width: 95vw !important;
max-width: calc(100vw - 20px) !important;
height: 70vh !important;
padding: 25px 15px 35px 15px !important;
margin: 10px auto !important;
box-sizing: border-box !important;
border-radius: 12px !important;
}
.card ul {
width: 80%;
left: -10%;
position: relative;
}
.card img,
.card .back-card.rotate {
width: 114px;
}
.card img {
box-shadow: none !important;
}
.carta-modal-flipper {
min-width: 48px !important;
min-height: 72px !important;
max-width: 65px !important;
margin: 0 auto;
}
}
#tarot-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#tarot-modal-contenido {
background: #1a1a1a;
padding-bottom: 60px;
padding-left: 40px;
padding-right: 40px;
padding-top: 50px;
border-radius: 15px;
border: 1px solid rgba(255, 220, 150, 0.5);
box-shadow: 0 0 40px rgba(255, 215, 0, 0.35);
width: 80%;
max-width: 800px;
min-height: 650px !important;
position: relative;
color: #fff;
text-align: center;
opacity: 0;
transform: scale(0.90);
transition: opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
transform 1.0s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
#tarot-modal-overlay.visible {
display: flex !important;
opacity: 1 !important;
}
#tarot-modal-overlay.visible #tarot-modal-contenido {
opacity: 1;
transform: scale(1);
}
#tarot-modal-contenido h2 {
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
box-shadow: none;
border-bottom: 0.1px solid wheat;
font-weight: 700;
letter-spacing: 1.4px;
line-height: 3rem;
margin-top: -25px !important;
margin-bottom: 25px !important;
padding-bottom: 20px;
background: linear-gradient(90deg, #ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#tarot-modal-contenido .h2-animado {
animation: appearMystic 1.5s ease-out forwards;
}
@keyframes appearMystic {
from {
opacity: 0;
filter: blur(3px);
transform: translateY(10px);
}
to {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
}
#modal-cerrar-btn {
position: absolute;
top: -20px;
right: -10px;
background: none;
border: none;
color: #fff;
font-size: 2.5rem;
cursor: pointer;
z-index: 10;
}
#tarot-modal-contenido .cartas-en-modal {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 29px !important;
justify-content: center !important;
padding: 20px 20px !important;
}
#tarot-modal-contenido .cartas-segunda-seleccion {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 25px !important;
justify-content: center !important;
padding: 10px 0 !important;
margin-bottom: 15px!important;
}
@media screen and (max-width: 767px) {
#tarot-modal-contenido .cartas-en-modal {
gap: 5px !important;
padding: 10px 0 !important;
grid-template-columns: repeat(4, 1fr) !important;
}
#tarot-modal-contenido .cartas-segunda-seleccion {
gap: 10px !important;
padding: 10px 0 !important;
grid-template-columns: repeat(4, 1fr) !important;
}
#tarot-modal-contenido h2 {
text-shadow: 0 0 6px rgba(255, 220, 150, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
box-shadow: none;
border-bottom: 0.1px solid wheat;
font-size: 1.2rem !important;
font-weight: 700;
line-height: 1.6;
letter-spacing: 1.1px;
margin-top: -15px !important;
background: linear-gradient(90deg, #ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: appearMystic 2.5s ease-out forwards;
}
}
.carta-modal-flipper {
perspective: 1000px;
width: 100%;
aspect-ratio: 2/3;
cursor: pointer;
}
.carta-modal-inner {
position: relative;
width: 100%;
height: 110%;
transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
transform-style: preserve-3d;
}
@media only screen and (max-width: 768px) {
#tarot-modal-contenido .cartas-en-modal .carta-modal-flipper {
width: 70px !important;
height: 120px !important;
}
#tarot-modal-contenido .cartas-en-modal .carta-modal-face {
width: 70px !important;
height: 120px !important;
}
}
.carta-modal-face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 8px;
overflow: hidden;
}
.carta-modal-face img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carta-modal-front {
transform: rotateY(180deg);
}
.carta-modal-flipper.seleccionada .carta-modal-inner {
transform: rotateY(180deg);
}
.carta-modal-flipper:not(.seleccionada).descartada {
opacity: 0.2 !important;
transform: scale(0.9) !important;
transition: opacity 1.5s ease, transform 1.5s ease !important;
}
.cartas-finales-contenedor {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
width: 100%;
min-height: 300px;
}
.carta-final-animacion {
width: 140px;
height: auto;
opacity: 0;
transform: scale(0.5);
animation: aparecerCartaFinal 2s ease-out forwards;
}
@keyframes aparecerCartaFinal {
to {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 25px 5px rgba(255, 215, 0, 0.7);
}
}
#tarot-modal-contenido input[type="text"],
#tarot-modal-contenido input[type="email"] {
width: 80%;
padding: 12px 15px;
margin: 10px auto;
background-color: #333;
border: 1px solid rgba(255, 220, 150, 0.6);
color: #FFFFFF;
border-radius: 8px;
font-size: 1rem;
display: block;
}
#tarot-modal-contenido form p {
color: rgba(255, 255, 255, 0.8);
margin: 15px 0 5px 0;
font-size: 0.9rem;
text-align: center;
}
#tarot-modal-contenido button[type="submit"] {
background-color: #FFA500;
color: #141018;
border: none;
padding: 15px 30px;
margin-top: 20px;
border-radius: 8px;
font-size: 1.1rem;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
#tarot-modal-contenido button[type="submit"]:hover {
background-color: #FFC500;
transform: scale(1.05);
}
.cartas-en-modal.animacion-en-curso {
position: relative;
min-height: 250px;
transition: min-height 0.5s ease;
}
.carta-modal-flipper.anim-viajar-centro {
position: absolute !important;
transition: top 2.5s cubic-bezier(0.65, 0, 0.35, 1),
left 2.5s cubic-bezier(0.65, 0, 0.35, 1),
transform 2.5s cubic-bezier(0.65, 0, 0.35, 1),
opacity 1.5s ease;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.1);
z-index: 100;
}
.cartas-consejo-seleccion {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 15px !important;
justify-content: center !important;
padding: 40px 0 !important;
perspective: 1000px !important;
z-index: 200 !important;
position: relative !important;
}
.carta-modal-flipper.anim-viaje-centro-consejo {
position: absolute !important;
top: 50%;
left: 50%;
z-index: 200;
transition: transform 2.5s cubic-bezier(0.6, 0.04, 0.98, 0.335);
transform: translate(-50%, -50%) scale(1.1);
animation: pulsoMistico 4s ease-in-out infinite;
}
.carta-modal-inner {
transition: transform 1.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.carta-modal-inner.anim-volteo-inverso {
transform: rotateY(180deg);
}
.carta-modal-flipper.anim-presentacion-final {
transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1);
transform: translate(-50%, -50%) scale(1.4);
animation-play-state: paused;
box-shadow: 0 0 50px 15px rgba(255, 215, 0, 0.85);
}
.carta-modal-flipper.anim-desvanecer-final {
transition: transform 1.5s ease-in, opacity 1.5s ease-in;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
@keyframes pulsoMistico {
0% {
box-shadow: 0 0 15px 3px rgba(255, 215, 0, 0.4);
}
50% {
box-shadow: 0 0 30px 8px rgba(255, 215, 0, 0.7);
}
100% {
box-shadow: 0 0 15px 3px rgba(255, 215, 0, 0.4);
}
}
.carta-modal-flipper.anim-consejo-final {
position: absolute !important;
transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.2);
z-index: 200;
}
#tarot-modal-contenido.efecto-fondo-magico {
background: radial-gradient(circle at center, rgba(255, 215, 0, 0.15) 0%, #1a1a1a 75%);
box-shadow: 0 0 60px rgba(255, 215, 0, 0.4), inset 0 0 60px 10px rgba(255, 215, 0, 0.1);
transition: all 2s ease;
}
.contenedor-animacion-paso1 {
position: absolute;
top: 0;
left: 5%;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 50;
}
.contenedor-animacion-paso1 .carta-modal-flipper {
z-index: 51;
}
.contenedor-animacion-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 99998;
}
.btn-group {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
max-width: 400px;
margin-top: -90px;
margin-bottom: 30px;
position: relative;
z-index: 100;
padding: 0 20px;
padding-left: 90px;
}
.btn-group .button {
position: relative;
font-family: inherit;
font-size: 1.2rem;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
color: #ffd700;
flex: 1;
padding: 15px 20px;
border-radius: 50px;
background: rgba(20, 20, 20, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 215, 0, 0.3);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.5),
inset 0 0 20px rgba(255, 215, 0, 0.05);
cursor: pointer;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-group .button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg,
transparent,
rgba(255, 215, 0, 0.2),
transparent);
transition: none;
}
.btn-group .button:hover {
color: #fff;
border-color: rgba(255, 215, 0, 1);
background: rgba(255, 215, 0, 0.15);
transform: translateY(-3px);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.5),
0 0 20px rgba(255, 215, 0, 0.4),
inset 0 0 15px rgba(255, 215, 0, 0.3);
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.btn-group .button:hover::before {
left: 100%;
transition: left 0.7s ease;
}
.btn-group .button:active {
transform: translateY(1px);
box-shadow:
0 2px 10px rgba(0, 0, 0, 0.5),
0 0 10px rgba(255, 215, 0, 0.2);
border-color: rgba(255, 215, 0, 0.5);
}
.card ul {
left: 30px;
margin: 0 auto;
min-height: 220px;
position: relative;
width: 83%;
}
@media screen and (max-width: 767px) {
.card ul {
margin-left: -48px;
min-height: 220px;
position: relative;
width: 70vw;
}
.btn-group {
padding-left: 20px;
margin-bottom: 0px;
margin-top: -160px;
flex-direction: column;
align-items: center;
gap: 0px;
max-width: 90%;
}
.btn-group .button {
margin-bottom: -5px;
font-family: inherit;
font-size: 1rem;
letter-spacing: 1.1px;
line-height: 1.3;
background: #f39c12;
color: #1a1a1a;
text-align: center;
text-decoration: none;
text-transform: capitalize;
font-weight: 700;
padding: 10px 10px;
border: none;
border-radius: 15px;
width: 100%;
flex-grow: 0;
}
@media screen and (max-width: 767px) {
.carta-modal-flipper {
min-width: 0px !important;
min-height: 72px !important;
max-width: 70px !important;            margin: 6px auto !important;
}
.carta-modal-flipper::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
z-index: -1;
}
}
}
@media screen and (max-width: 767px) {
.card ul {
margin-left: -48px;
min-height: 220px;
position: relative;
width: 70vw;
padding-bottom: 15px;
}
.card ul::after {
content: '';
position: absolute;
bottom: 80px;
left: 85%;
transform: translateX(-50%);
width: 90%;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 215, 0, 0.6) 30%,
rgba(255, 215, 0, 0.9) 50%,
rgba(255, 215, 0, 0.6) 70%,
transparent 100%);
border-radius: 50%;
filter: blur(0.5px);
pointer-events: none;
z-index: 1;
animation: brilloBorde 4s ease-in-out infinite;
}
@keyframes brilloBorde {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
.card img {
width: 114px;
filter: contrast(1.15) brightness(1.05);
border-radius: 8px;
transition: filter 0.3s ease;
}
}
.cartas-segunda-seleccion.preparacion-activa {
perspective: 1000px;
}
.cartas-segunda-seleccion .carta-modal-flipper {
transition: all 300ms ease;
}
.cartas-segunda-seleccion .carta-modal-flipper.rol-amor .carta-modal-back img,
.cartas-segunda-seleccion .carta-modal-flipper.rol-dinero .carta-modal-back img,
.cartas-segunda-seleccion .carta-modal-flipper.rol-salud .carta-modal-back img {
animation: pulse-dorso 1.5s ease-in-out infinite;
}
@keyframes pulse-dorso {
0%,
100% {
filter: brightness(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
50% {
filter: brightness(1.2) drop-shadow(0 0 15px currentColor);
}
}
.cartas-segunda-seleccion .carta-modal-flipper.rol-amor .carta-modal-back img {
color: #ff69b4;
}
.cartas-segunda-seleccion .carta-modal-flipper.rol-dinero .carta-modal-back img {
color: #ffd700;
}
.cartas-segunda-seleccion .carta-modal-flipper.rol-salud .carta-modal-back img {
color: #00fa9a;
}
.carta-modal-flipper.consolidado-final {
animation: consolidacion-magica 2s ease forwards;
}
@keyframes consolidacion-magica {
0% {
transform: scale(1) rotate(0deg);
filter: brightness(1);
}
30% {
transform: scale(1.1) rotate(5deg);
filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}
60% {
transform: scale(0.95) rotate(-2deg);
filter: brightness(0.9) drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
100% {
transform: scale(1) rotate(0deg);
filter: brightness(1) drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}
}
.cartas-consejo-seleccion .carta-modal-flipper {
transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (max-width: 768px) {
.cartas-segunda-seleccion .carta-modal-flipper {
transition: all 250ms ease;
}
@keyframes consolidacion-magica {
0% {
transform: scale(1) rotate(0deg);
}
30% {
transform: scale(1.05) rotate(3deg);
}
60% {
transform: scale(0.98) rotate(-1deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
}
.carta-modal-flipper.transformando-rol .carta-modal-inner {
transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.carta-modal-flipper.transformando-rol .carta-modal-back img {
transition: all 500ms ease 400ms;
}
.carta-modal-flipper.rol-amor .carta-modal-back img,
.carta-modal-flipper.rol-dinero .carta-modal-back img,
.carta-modal-flipper.rol-salud .carta-modal-back img {
animation: pulse-dorso 2s ease-in-out infinite 900ms;
}
@keyframes pulse-dorso {
0%,
100% {
filter: brightness(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
transform: scale(1);
}
50% {
filter: brightness(1.25) drop-shadow(0 0 20px currentColor);
transform: scale(1.02);
}
}
#modal-pasos-wrapper {
position: relative;
transition: opacity 1.2s ease-in-out, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: center center;
}
.modal-oculto-magico {
opacity: 0 !important;
transform: scale(0.9);
pointer-events: none;
}
.modal-visible-magico {
opacity: 1 !important;
transform: scale(1);
}
.cartas-segunda-seleccion {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 15px !important;
justify-items: center !important;
align-items: start !important;
padding: 20px 0 !important;
max-width: 100% !important;
margin: 0 auto !important;
position: relative !important;
min-height: 250px !important;
}
.carta-paso2-flipper {
width: 135px !important;
height: 220px !important;
cursor: pointer !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
transform-style: preserve-3d !important;
position: relative !important;
}
.carta-paso2-flipper:hover {
transform: scale(1.1) translateY(-10px) !important;
z-index: 50 !important;
filter: drop-shadow(0 0 15px red) !important;
}
.carta-paso2-inner {
position: relative !important;
width: 100% !important;
height: 100% !important;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
transform-style: preserve-3d !important;
pointer-events: none !important;
}
.carta-paso2-face {
position: absolute !important;
inset: 0 !important;
backface-visibility: hidden !important;
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
pointer-events: none !important;
}
.carta-paso2-back {
transform: rotateY(180deg) !important;
}
.carta-paso2-face img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
pointer-events: none !important;
border-radius: 8px !important;
}
.carta-paso2-flipper.seleccionada-paso2 {
pointer-events: none !important;
filter: drop-shadow(0 0 25px red) !important;
z-index: 100 !important;
animation: seleccionPaso2 0.7s ease forwards;
}
@keyframes seleccionPaso2 {
to {
transform: scale(1.15) rotateY(180deg) !important;
}
}
.carta-paso2-flipper.descartada-paso2 {
opacity: 0.15 !important;
transform: scale(0.7) translateY(50px) !important;
filter: blur(3px) grayscale(100%) !important;
pointer-events: none !important;
transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.contenedor-animacion-overlay-paso2 {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
z-index: 99998 !important;
}
.texto-mistico-animacion-paso2 {
position: fixed !important;
top: calc(50% + 100px) !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
color: red !important;
font-size: 1.6rem !important;
font-style: italic !important;
text-align: center !important;
font-family: inherit;
opacity: 0;
transition: opacity 1s ease;
max-width: 85% !important;
text-shadow: 0 0 15px rgba(0, 0, 0, 0.9), 0 0 25px red !important;
z-index: 99999 !important;
pointer-events: none !important;
background: rgba(0, 0, 0, 0.3) !important;
padding: 15px 25px !important;
border-radius: 15px !important;
backdrop-filter: blur(5px) !important;
}
.texto-mistico-animacion-paso2.visible {
opacity: 1;
}
.efecto-fondo-magico-paso2 {
animation: pulsarFondoPaso2 3s ease-in-out infinite;
}
@keyframes pulsarFondoPaso2 {
0%,
100% {
box-shadow: 0 0 40px red, inset 0 0 20px rgba(255, 0, 0, 0.1);
}
50% {
box-shadow: 0 0 80px #8b0000, inset 0 0 40px rgba(139, 0, 0, 0.2);
}
}
@media screen and (max-width: 767px) {
.card .back-card {
filter: brightness(1.5);
border-radius: 12px;
box-shadow: 0 0 10px 2px rgba(255, 220, 150, 0.3);
transition: box-shadow 0.3s ease, opacity 0.3s ease;
}
.carta-paso2-flipper {
width: 70px !important;
max-width: 90px !important;
height: 120px !important;
}
.texto-mistico-animacion-paso2 {
font-size: 1.1rem !important;
top: calc(50% + 80px) !important;
max-width: 90% !important;
padding: 10px 15px !important;
}
}
#tarot-modal-contenido .cartas-segunda-seleccion .carta-paso2-inner {
transform: rotateY(180deg) !important;
}
#tarot-modal-contenido .cartas-segunda-seleccion .carta-paso2-flipper.volteada .carta-paso2-inner {
transform: rotateY(0deg) !important;
}
@keyframes seleccionPaso2 {
to {
transform: scale(1.15) !important;
}
}
.carta-paso2-flipper.volteada {
filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) !important;
}
#contenedor-ritual-final {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999999;
pointer-events: none;
overflow: hidden;
}
#ritual-texto-final {
position: fixed;
top: calc(50% + 180px);
left: 50%;
transform: translateX(-50%);
color: #d4af37;
font-size: 1.4rem;
font-weight: 700;
text-align: center;
opacity: 0;
z-index: 1000000;
width: 90%;
max-width: 600px;
background: rgba(0, 0, 0, 0.85);
padding: 15px 15px;
border-radius: 15px;
border: 2px solid #d4af37;
box-shadow:
inset 0 0 20px rgba(212, 175, 55, 0.3),
0 10px 30px rgba(0, 0, 0, 0.8),
0 0 0 4px rgba(0, 0, 0, 0.9),
0 0 0 6px #d4af37;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
#ritual-texto-final.ritual-visible {
opacity: 1;
}
#ritual-texto-final.ritual-corrompido {
color: #ff0044;
text-shadow: 0 0 50px rgba(255, 0, 68, 1);
animation: texto-latido-rojo 2s infinite ease-in-out;
}
@keyframes texto-latido-rojo {
0%,
100% {
text-shadow: 0 0 30px rgba(255, 0, 68, 0.8);
transform: translateX(-50%) scale(1);
}
50% {
text-shadow: 0 0 60px rgba(255, 0, 68, 1);
transform: translateX(-50%) scale(1.05);
}
}
.ritual-carta-nucleo {
position: fixed;
width: 135px !important;
height: 210px !important;
transform-origin: center center !important;
pointer-events: none;
box-shadow: none;
--destino-x: 0px;
--destino-y: 0px;
}
.ritual-carta-nucleo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
#contenedor-ritual-final .fase-ritual {
animation: ritual-llegada-centro 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#contenedor-ritual-final .fase-ritual img {
animation: ritual-brillo-dorado 2s ease-in-out infinite;
}
#contenedor-ritual-final .fase-corrupcion {
animation: corrupcion-solida 2s ease-in-out infinite;
}
#contenedor-ritual-final .fase-corrupcion img {
animation: corrupcion-color 1s ease-out forwards;
}
#contenedor-ritual-final .fase-colapso {
animation: colapso-centro 2s cubic-bezier(0.7, 0, 0.8, 1) forwards;
}
@keyframes ritual-llegada-centro {
0% {
transform: translate(0, 0) scale(1) rotate(0deg);
opacity: 1;
}
100% {
transform: translate(var(--destino-x), var(--destino-y)) scale(1.2) rotate(calc(360deg + var(--rotacion-final)));
opacity: 1;
}
}
@keyframes ritual-brillo-dorado {
0%,
100% {
filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
}
50% {
filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1));
}
}
@keyframes corrupcion-color {
0% {
filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1));
}
100% {
filter: drop-shadow(0 0 60px rgba(255, 0, 68, 1)) hue-rotate(-15deg) contrast(1.2);
}
}
@keyframes corrupcion-solida {
0% {
transform: translate(var(--destino-x), var(--destino-y)) scale(1.2) rotate(calc(360deg + var(--rotacion-final)));
}
50% {
transform: translate(var(--destino-x), var(--destino-y)) scale(1.3) rotate(calc(360deg + var(--rotacion-final)));
}
100% {
transform: translate(var(--destino-x), var(--destino-y)) scale(1.2) rotate(calc(360deg + var(--rotacion-final)));
}
}
@keyframes colapso-centro {
0% {
transform: translate(var(--destino-x), var(--destino-y)) scale(1.2) rotate(calc(360deg + var(--rotacion-final)));
opacity: 1;
filter: blur(0);
}
100% {
transform: translate(var(--destino-x), calc(var(--destino-y) + 150px)) scale(0);
opacity: 0;
filter: blur(20px);
}
}
.efecto-fondo-ritual {
background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, rgba(0, 0, 0, 0.8) 70%) !important;
transition: background 2s ease;
}
.efecto-fondo-ritual.corrompido {
background: radial-gradient(circle at center, rgba(255, 0, 68, 0.2) 0%, #000000 90%) !important;
}
.efecto-fondo-ritual.efecto-transformado.resultado-mal {
background: radial-gradient(circle at center, rgba(255, 0, 68, 0.2) 0%, #000000 90%) !important;
}
.efecto-fondo-ritual.efecto-transformado.resultado-bien {
background: radial-gradient(circle at center, rgba(0, 255, 68, 0.2) 0%, #000000 90%) !important;
}
.efecto-fondo-ritual.efecto-transformado.resultado-normal {
background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3) 0%, #000000 80%) !important;
}
#ritual-texto-final.texto-transformado {
animation: texto-latido-color 2s infinite ease-in-out;
}
@media only screen and (max-width: 767px) {
#ritual-texto-final.texto-transformado {
font-size: 15px !important;
line-height: 1.4 !important;
padding: 10px 15px !important;
}
#ritual-texto-final {
min-height: 135px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.3rem !important;
}
}
#ritual-texto-final.resultado-mal {
color: #ff0044 !important;
text-shadow: 0 0 50px rgba(255, 0, 68, 1) !important;
border-color: #ff0044 !important;
box-shadow: inset 0 0 20px rgba(255, 0, 68, 0.3),
0 10px 30px rgba(0, 0, 0, 0.9),
0 0 0 4px rgba(0, 0, 0, 0.9),
0 0 0 6px #ff0044,
0 0 30px rgba(255, 0, 68, 0.6) !important;
}
#ritual-texto-final.resultado-bien {
color: #00ff44 !important;
text-shadow: 0 0 50px rgba(0, 255, 68, 1) !important;
border-color: #00ff44 !important;
box-shadow: inset 0 0 20px rgba(0, 255, 68, 0.3),
0 10px 30px rgba(0, 0, 0, 0.9),
0 0 0 4px rgba(0, 0, 0, 0.9),
0 0 0 6px #00ff44,
0 0 30px rgba(0, 255, 68, 0.6) !important;
}
#ritual-texto-final.resultado-normal {
color: #ffd700 !important;
text-shadow: 0 0 50px rgba(255, 215, 0, 1) !important;
border-color: #ffd700 !important;
box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.3),
0 10px 30px rgba(0, 0, 0, 0.9),
0 0 0 4px rgba(0, 0, 0, 0.9),
0 0 0 6px #ffd700,
0 0 30px rgba(255, 215, 0, 0.6) !important;
}
@keyframes texto-latido-color {
0%,
100% {
transform: translateX(-50%) scale(1);
opacity: 0.9;
}
50% {
transform: translateX(-50%) scale(1.05);
opacity: 1;
}
}
.fase-transformacion {
animation: animacion-latido-cartas 2s ease-in-out infinite;
}
.fase-transformacion.resultado-mal img {
animation: filtro-mal 1s ease-out forwards;
}
.fase-transformacion.resultado-bien img {
animation: filtro-bien 1s ease-out forwards;
}
.fase-transformacion.resultado-normal img {
animation: filtro-normal 1s ease-out forwards;
}
@keyframes filtro-mal {
0% {
filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1));
}
100% {
filter: drop-shadow(0 0 60px rgba(255, 0, 68, 1)) hue-rotate(-15deg) contrast(1.2);
}
}
@keyframes filtro-bien {
0% {
filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1));
}
100% {
filter: drop-shadow(0 0 60px rgba(0, 255, 68, 1)) hue-rotate(90deg) contrast(1.1);
}
}
@keyframes filtro-normal {
0% {
filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1));
}
100% {
filter: drop-shadow(0 0 60px rgba(255, 215, 0, 1)) brightness(1.2);
}
}
@keyframes animacion-latido-cartas {
0% {
transform: translate(var(--destino-x), var(--destino-y)) scale(1.2) rotate(calc(360deg + var(--rotacion-final)));
}
50% {
transform: translate(var(--destino-x), var(--destino-y)) scale(1.25) rotate(calc(360deg + var(--rotacion-final)));
}
100% {
transform: translate(var(--destino-x), var(--destino-y)) scale(1.2) rotate(calc(360deg + var(--rotacion-final)));
}
}
.cartas-consejo-seleccion {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
justify-content: center;
padding: 40px 0;
perspective: 1000px;
z-index: 200;
position: relative;
}
.carta-consejo-item,
.carta-flotante-final {
width: 135px !important;
height: 210px !important;
position: relative !important;
cursor: pointer !important;
transform-style: preserve-3d !important;
margin: 0 auto !important;
display: block !important;
}
.carta-consejo-item .carta-modal-inner,
.carta-flotante-final .carta-modal-inner {
width: 100%;
height: 100%;
position: relative !important;
transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1) !important;
transform-style: preserve-3d !important;
transform: rotateY(180deg) !important;
}
.carta-consejo-item.volteando .carta-modal-inner,
.carta-flotante-final.volteando .carta-modal-inner {
transform: rotateY(0deg) !important;
box-shadow: 0 0 30px rgba(255, 215, 0, 0.6) !important;
}
.carta-consejo-item .carta-modal-face,
.carta-flotante-final .carta-modal-face {
position: absolute !important;
width: 100% !important;
height: 110% !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}
.carta-consejo-item .carta-modal-front,
.carta-flotante-final .carta-modal-front {
transform: rotateY(0deg) !important;
z-index: 2 !important;
}
.carta-consejo-item .carta-modal-back,
.carta-flotante-final .carta-modal-back {
transform: rotateY(180deg) !important;
}
.carta-consejo-item img,
.carta-flotante-final img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.carta-flotante-final {
position: fixed !important;
z-index: 9999999 !important;
pointer-events: none;
}
.carta-flotante-final.levitando {
animation: levitacion-mistica 3s ease-in-out infinite !important;
}
@keyframes levitacion-mistica {
0%,
100% {
transform: translate(-50%, -65%) scale(1.6);
}
50% {
transform: translate(-50%, -67%) scale(1.65);
filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8));
}
}
.cartas-obstaculo-seleccion {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
justify-content: center;
padding: 10px 0;
perspective: 1000px;
z-index: 200;
position: relative;
max-width: 600px;
margin: 0 auto;
}
.carta-obstaculo-item,
.carta-flotante-obstaculo {
width: 180px !important;
height: 290px !important;
position: relative !important;
cursor: pointer !important;
transform-style: preserve-3d !important;
margin: 0 auto !important;
display: block !important;
}
.carta-obstaculo-item .carta-modal-inner,
.carta-flotante-obstaculo .carta-modal-inner {
width: 100% !important;
height: 210px !important;
position: relative !important;
transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1) !important;
transform-style: preserve-3d !important;
transform: rotateY(180deg) !important;
}
.carta-obstaculo-item .carta-modal-face,
.carta-flotante-obstaculo .carta-modal-face {
position: absolute !important;
width: 100% !important;
height: 100% !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6) !important;
}
.carta-obstaculo-item .carta-modal-front,
.carta-flotante-obstaculo .carta-modal-front {
transform: rotateY(0deg) !important;
z-index: 2 !important;
}
.carta-obstaculo-item .carta-modal-back,
.carta-flotante-obstaculo .carta-modal-back {
transform: rotateY(180deg) !important;
}
.carta-obstaculo-item.volteando .carta-modal-inner,
.carta-flotante-obstaculo.volteando .carta-modal-inner {
transform: rotateY(0deg) !important;
box-shadow: 0 0 40px rgba(255, 0, 0, 0.8), inset 0 0 20px rgba(100, 0, 0, 0.9) !important;
border: 1px solid rgba(255, 0, 0, 0.5) !important;
}
.carta-flotante-obstaculo {
position: fixed !important;
z-index: 9999999 !important;
pointer-events: none;
transition: all 2.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
transform-origin: center center !important;
}
.carta-flotante-obstaculo.levitando-rojo {
animation: levitacion-peligrosa 3s ease-in-out infinite !important;
}
.alerta-roja-fondo {
box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.2) !important;
transition: box-shadow 2s ease !important;
}
.carta-obstaculo-item .carta-modal-inner, .carta-flotante-obstaculo .carta-modal-inner {
width: 100% !important;
height: 290px !important;
position: relative !important;
transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1) !important;
transform-style: preserve-3d !important;
transform: rotateY(180deg) !important;
}
@media (max-width: 768px) {
.carta-obstaculo-item, .carta-flotante-obstaculo {
margin-left: 20px!important;
width: 90px !important;
height: 155px !important;
cursor: pointer !important;
}
.carta-obstaculo-item .carta-modal-inner, .carta-flotante-obstaculo .carta-modal-inner {
width: 90px !important;
height: 155px !important;
position: relative !important;
transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1) !important;
transform-style: preserve-3d !important;
transform: rotateY(180deg) !important;
}
.cartas-obstaculo-seleccion {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.carta-obstaculo-item {
width: 100%;
height: 100%;
}
.carta-obstaculo-item img,
.carta-flotante-obstaculo img {
width: 100%;
height: 100%;
object-fit: cover !important;
}
.carta-flotante-obstaculo.carta-modal-flipper {
max-width: none !important;
min-height: 0 !important;
width: 180px !important;
height: 270px !important;
}
.carta-flotante-obstaculo.levitando-rojo {
animation: levitacion-peligrosa-movil 3s infinite !important;
}
@keyframes levitacion-peligrosa-movil {
0%,
100% {
transform: translate(-50%, -50%) scale(1.15);
}
50% {
transform: translate(-50%, -52%) scale(1.2);
}
}
}
#frase-consejo-final {
position: fixed !important;
top: auto !important;
bottom: -15% !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 85% !important;
max-width: 800px !important;
z-index: 99999999 !important;
font-size: 1.6rem !important;
line-height: 1.5 !important;
text-align: center !important;
font-weight: 700 !important;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) !important;
letter-spacing: 0.5px !important;
opacity: 0 !important;
transition: opacity 0.8s ease-in-out !important;
pointer-events: none;
}
@media (max-width: 768px) {
#frase-consejo-final {
margin-bottom: 90px!important;}
}
#frase-consejo-final.visible {
opacity: 1 !important;
}
@media (max-width: 768px) {
.cartas-consejo-seleccion {
grid-template-columns: repeat(2, 1fr) !important;
}
.carta-consejo-item {
width: 150px !important;
height: 185px !important;
}
.carta-consejo-item img {
width: 130px !important;
height: 185px !important;
object-fit: cover !important;
}
.carta-consejo-item .carta-modal-face {
position: absolute !important;
width: 110px !important;
height: 185px !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}
.carta-flotante-final.levitando {
animation: levitacion-mistica-movil-v2 3s ease-in-out infinite !important;
}
@keyframes levitacion-mistica-movil-v2 {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -52%) scale(1.05);
}
}
#frase-consejo-final {
font-size: 1.1rem !important;
top: auto !important;
bottom: -120px !important;
background: rgba(0, 0, 0, 0.85);
padding: 15px !important;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
width: 90% !important;
}
}
#tarot-modal-contenido.alerta-roja-fondo {
border: 2px solid rgba(255, 0, 0, 0.8) !important;
box-shadow:
0 0 50px rgba(255, 0, 0, 0.6),
inset 0 0 100px rgba(139, 0, 0, 0.9) !important;
animation: latido-modal-rojo 3s infinite ease-in-out !important;
}
@keyframes latido-modal-rojo {
0%,
100% {
box-shadow:
0 0 40px rgba(255, 0, 0, 0.5),
inset 0 0 80px rgba(100, 0, 0, 0.8);
border-color: #a00000;
}
50% {
box-shadow:
0 0 90px rgba(255, 0, 0, 0.9),
inset 0 0 150px rgba(180, 0, 0, 0.6);
border-color: #ff3333;
}
}
#tarot-modal-contenido.alerta-roja-fondo {
border: 2px solid rgba(255, 0, 0, 0.8) !important;
box-shadow:
0 0 50px rgba(255, 0, 0, 0.6),
inset 0 0 100px rgba(139, 0, 0, 0.9) !important;
animation: latido-modal-rojo 3s infinite ease-in-out !important;
}
@keyframes latido-modal-rojo {
0%,
100% {
box-shadow:
0 0 40px rgba(255, 0, 0, 0.5),
inset 0 0 80px rgba(100, 0, 0, 0.8);
border-color: #a00000;
}
50% {
box-shadow:
0 0 90px rgba(255, 0, 0, 0.9),
inset 0 0 150px rgba(180, 0, 0, 0.6);
border-color: #ff3333;
}
}
.ocultar-titulo-h2 h2,
#modal-pasos-wrapper.ocultar-titulo-h2 h2 {
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.4s ease !important;
margin: 0 !important;
height: 0 !important;
padding: 0 !important;
}
.carta-flotante-obstaculo img {
filter: sepia(1) hue-rotate(-50deg) saturate(3) contrast(1.1) !important;
}
.carta-flotante-obstaculo,
.carta-flotante-obstaculo .carta-modal-inner,
.carta-flotante-obstaculo .carta-modal-face {
overflow: visible !important;
transform-style: preserve-3d !important;
}
.carta-flotante-obstaculo .carta-modal-face {
box-shadow: none !important;
}
#frase-obstaculo-final {
position: absolute !important;
bottom: -150px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 50 !important;
width: 90% !important;
max-width: 800px !important;
padding: 10px !important;
border-radius: 10px !important;
background: transparent !important;
text-align: center !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
color: #ffdddd !important;
text-shadow:
0 0 3px #ff0000,
0 0 5px #ff0000,
0 0 10px #ff0000,
0 0 30px #ff0000 !important;
opacity: 0;
transform: translateY(20px);
transition: all 1.5s ease-out;
}
#frase-obstaculo-final.visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 768px) {
#frase-obstaculo-final {
font-size: 1.1rem !important;
bottom: -90px !important;
width: 90% !important;
}
}
@media (max-width: 768px) {
.ocultar-titulo-h2 h2 {
display: none !important;
}
}
#tarot-modal-contenido,
.modal-content,
.carta-flotante-obstaculo {
overflow: visible !important;
}
.interaccion-bloqueada {
pointer-events: none !important;
cursor: default !important;
}
.cartas-segunda-seleccion .carta-paso2-inner {
transition: transform 1.5s ease-in-out !important;
}
.carta-consejo-item .carta-modal-inner {
transition: transform 1.5s ease-in-out !important;
}
#capa-ritual-entrada {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}
.carta-actor-intro {
position: fixed;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
overflow: hidden;
background-color: #1a1a1a;
border: 1px solid rgba(255, 215, 0, 0.3);
}
.carta-actor-intro img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: contrast(1.1) brightness(1.1);
}
.texto-ritual-intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: inherit;
font-size: 1.9rem;
font-weight: 700;
font-style: italic;
text-align: center;
line-height: 1.5;
color: #ffffff;
text-shadow:
0 0 10px rgba(255, 215, 0, 0.8),
0 0 20px rgba(255, 215, 0, 0.4),
0 2px 5px rgba(0, 0, 0, 0.9);
background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
padding: 40px;
opacity: 0;
transition: opacity 1s ease-in-out, transform 6s ease;
z-index: 100000;
width: 90%;
max-width: 650px;
pointer-events: none;
}
.texto-ritual-intro.visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
.carta-grid-destino {
transition: opacity 0.4s ease-out;
}
@media screen and (max-width: 767px) {
.texto-ritual-intro {
font-size: 1.3rem;
width: 85%;
}
.carta-actor-intro {
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
}
#contenedor-ritual-tiempo {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
pointer-events: none;
transition: background-color 1.5s ease, opacity 2s ease;
background-color: rgba(0, 0, 0, 0);
}
.efecto-fondo-ritual-tiempo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(20, 20, 30, 0.8) 0%, #000 100%);
opacity: 0;
transition: opacity 2s ease;
}
#contenedor-ritual-tiempo.efecto-fondo-ritual-tiempo .efecto-fondo-ritual-tiempo {
opacity: 1;
}
.carta-tiempo-actor {
position: absolute;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
overflow: hidden;
transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease, border 0.5s ease;
z-index: 100;
}
.carta-tiempo-actor img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.carta-tiempo-actor.activada-energia {
animation: latidoMistico 3s infinite ease-in-out;
box-shadow: 0 0 30px 5px rgba(255, 215, 0, 0.6),
0 0 60px 10px rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.8);
z-index: 200 !important;
}
.carta-tiempo-actor.rol-pasado.activada-energia {
border-color: #87CEEB;
box-shadow: 0 0 30px rgba(135, 206, 235, 0.6);
}
.carta-tiempo-actor.rol-presente.activada-energia {
border-color: #FFD700;
box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}
.carta-tiempo-actor.rol-futuro.activada-energia {
border-color: #D8BFD8;
box-shadow: 0 0 30px rgba(216, 191, 216, 0.6);
}
@keyframes latidoMistico {
0%,
100% {
transform: translate(-50%, -50%) scale(1.2);
}
50% {
transform: translate(-50%, -50%) scale(1.25);
}
}
.linea-hilo-tiempo {
position: absolute;
top: 50%;
left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg,
rgba(135, 206, 235, 0) 0%,
rgba(135, 206, 235, 1) 20%,
rgba(255, 215, 0, 1) 50%,
rgba(216, 191, 216, 1) 100%);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
z-index: 90;
transition: width 12s linear;
}
.linea-hilo-tiempo.tejiendo {
width: 100%;
}
.cabeza-linea-luz {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.9);
}
.texto-ritual-tiempo {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%) scale(0.9);
width: 90%;
max-width: 700px;
text-align: center;
font-size: 1.9rem;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
opacity: 0;
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
z-index: 200;
letter-spacing: 2px;
padding-bottom: 20px;
}
.texto-ritual-tiempo.visible {
transform: translateX(-50%) scale(1);
opacity: 1;
}
.texto-ritual-tiempo.color-pasado {
color: #87CEEB;
text-shadow: 0 0 20px rgba(135, 206, 235, 0.3);
}
.texto-ritual-tiempo.color-presente {
color: #FFD700;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.texto-ritual-tiempo.color-futuro {
color: #D8BFD8;
text-shadow: 0 0 20px rgba(216, 191, 216, 0.3);
}
.cartas-en-modal .carta-modal-flipper:not(.seleccionada):hover .carta-modal-inner {
transform: translateY(-15px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}
.cartas-en-modal .carta-modal-flipper:not(.seleccionada):hover .carta-modal-back {
box-shadow: 0 0 25px 5px rgba(255, 215, 0, 0.7);
border: 1px solid rgba(255, 215, 0, 0.9);
transition: all 0.3s ease;
}
.modal-oscuro-ritual {
background-color: rgba(0, 0, 0, 0.85) !important;
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.9);
transition: background-color 1s ease;
}
.contenedor-mapa-estelar {
position: relative;
width: 100%;
max-width: auto;
margin: 20px auto;
text-align: center;
color: #fff;
z-index: 100;
}
.titulo-constelacion {
font-family: 'Cinzel', serif;
font-size: 1.4rem;
color: #ccc;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
color: #aec6cf;
text-transform: uppercase;
font-size: 0.85em;
letter-spacing: 3px;
margin-bottom: 15px;
margin-top: 0;
}
.titulo-constelacion span {
display: block;
font-size: 2.3rem !important;
color: #ffd700;
padding-top: 10px;
padding-bottom: 2px;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
font-size: 1.4rem;
color: #ccc;
margin-bottom: 15px;
text-transform: none;
letter-spacing: 3px;
}
.lienzo-estelar {
width: 100%;
height: 200px;
background: radial-gradient(circle at center, rgba(20, 20, 40, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
border: 1px solid rgba(255, 215, 0, 0.3);
border-radius: 10px;
margin-bottom: 15px;
position: relative;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.significado-constelacion {
font-style: italic;
font-size: 1.1rem;
color: #eee;
line-height: 1.5;
margin-bottom: 25px;
padding: 0 10px;
letter-spacing: 1px;
}
.btn-continuar-magico {
background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
border: none;
padding: 22px 30px;
font-size: 1.4rem;
color: #000;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 4px;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
transition: all 0.3s ease;
margin-top: 0px;
outline: none;
}
.btn-continuar-magico:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 25px rgba(255, 215, 0, 0.6);
background: linear-gradient(135deg, #ffe033 0%, #d4af37 100%);
}
.btn-continuar-magico:active {
transform: translateY(1px);
}
.carta-paso2-flipper:hover .carta-paso2-inner {
transform: translateY(-15px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.carta-paso2-flipper:hover .carta-paso2-back {
box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.6);
border: 1px solid rgba(255, 215, 0, 0.8);
transition: all 0.3s ease;
}
.carta-paso2-flipper.seleccionada-paso2:hover .carta-paso2-inner {
transform: none;
}
.contenedor-mapa-estelar {
background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 15px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
position: relative;
overflow: hidden;
text-align: center;
}
.titulo-constelacion span {
color: #ffd700;
font-family: 'Cinzel', serif;
font-size: 1.6em;
display: block;
margin-top: 8px;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
font-weight: bold;
}
.lienzo-estelar {
width: 100%;
height: 140px;
position: relative;
margin: 40px 0;
background-image:
radial-gradient(white, rgba(255, 255, 255, .2) 1px, transparent 2px),
radial-gradient(white, rgba(255, 255, 255, .1) 1px, transparent 1px);
background-size: 250px 250px, 100px 100px;
background-position: 0 0, 20px 20px;
}
.significado-constelacion {
font-style: italic;
color: #dcdcdc;
font-size: 1.25em;
line-height: 1.7;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 15px;
margin-top: 5px;
margin-bottom: -0px;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.separador-final {
height: 1px;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
margin: 20px auto;
width: 70%;
opacity: 0.6;
}
.input-group-mistico {
margin-bottom: 15px;
}
.input-group-mistico input {
width: 80%;
padding: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 5px;
color: #fff;
font-size: 1em;
text-align: center;
transition: all 0.3s ease;
}
.input-group-mistico input:focus {
outline: none;
background: rgba(255, 255, 255, 0.1);
border-color: #ffd700;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}
.boton-revelar {
background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
color: #1a1a00;
font-weight: bold;
text-transform: uppercase;
border: none;
padding: 15px 40px;
border-radius: 50px;
cursor: pointer;
font-size: 1.1em;
letter-spacing: 1px;
margin-top: 10px;
transition: transform 0.2s, box-shadow 0.3s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.boton-revelar:hover {
transform: scale(1.05);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}
.carta-tiempo-actor {
position: absolute;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}
.carta-tiempo-actor img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.carta-tiempo-actor.rol-pasado.activada-energia {
border: 2px solid rgba(0, 191, 255, 1);
box-shadow: 0 0 30px rgba(0, 191, 255, 0.8), 0 0 60px rgba(0, 191, 255, 0.4);
animation: latidoAzul 3s infinite ease-in-out;
}
.carta-tiempo-actor.rol-presente.activada-energia {
border: 2px solid rgba(255, 215, 0, 1);
box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 80px rgba(255, 215, 0, 0.4);
z-index: 200 !important;
animation: latidoDorado 3s infinite ease-in-out;
}
.carta-tiempo-actor.rol-futuro.activada-energia {
border: 2px solid rgba(148, 0, 211, 1);
box-shadow: 0 0 30px rgba(148, 0, 211, 0.8), 0 0 60px rgba(148, 0, 211, 0.4);
animation: latidoVioleta 3s infinite ease-in-out;
}
@keyframes latidoVioleta {
0%,
100% {
transform: scale(1.2);
box-shadow: 0 0 30px rgba(148, 0, 211, 0.8);
}
50% {
transform: scale(1.25);
box-shadow: 0 0 60px rgba(148, 0, 211, 1);
}
}
@keyframes latidoAzul {
0%,
100% {
transform: scale(1.2);
box-shadow: 0 0 30px rgba(0, 191, 255, 0.8);
}
50% {
transform: scale(1.25);
box-shadow: 0 0 60px rgba(0, 191, 255, 1);
}
}
@keyframes latidoDorado {
0%,
100% {
transform: scale(1.2);
box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
}
50% {
transform: scale(1.25);
box-shadow: 0 0 80px rgba(255, 215, 0, 1);
}
}
@keyframes flashEntrada {
0% {
opacity: 0;
}
50% {
opacity: 0.6;
}
100% {
opacity: 0;
}
}
.card {
margin-top: 50px !important;
position: relative;
height: 540px !important;
display: flex !important;
justify-content: center;
align-items: flex-start;
perspective: 1000px;
overflow: visible !important;
opacity: 0;
transition: opacity 0.5s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: pan-y;
cursor: grab;
}
.card:active {
cursor: grabbing;
}
.card.mazo-listo {
opacity: 1;
}
.card ul.inline {
width: 0;
height: 0;
padding: 0;
margin: 0;
list-style: none;
perspective: 1000px;
position: relative;
z-index: 10;
}
.card li {
margin-top: 100px !important;
position: absolute !important;
left: 0px !important;
width: 170px !important;
height: 270px !important;
margin-left: -70px !important;
transform-origin: 40% 1300px !important;
display: inline-block;
transform-style: preserve-3d;
z-index: 1;
transition: transform 5.0s cubic-bezier(0.1, 0.8, 0.1, 1), filter 0.5s ease, opacity 0.5s ease;
will-change: transform, filter;
}
.card ul.inline {
perspective: 3000px;
transform-style: preserve-3d;
transform: rotateX(0deg) translateY(-100px);
height: 0;
padding: 0;
margin: 0 auto;
position: relative;
list-style: none;
z-index: 10;
}
.card ul.inline::before {
content: '';
position: absolute;
left: 50%;
width: 2850px;
height: 4300px;
margin-left: -1410px;
top: 480px;
border: 2px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
pointer-events: none;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% 4%, 0 4%);
-webkit-mask-image: linear-gradient(to right,
transparent 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 80%,
transparent 100%);
mask-image: linear-gradient(to right,
transparent 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 80%,
transparent 100%);
animation: arcGlow 4s ease-in-out infinite;
}
.card ul.inline::after {
content: '';
position: absolute;
left: 50%;
width: 2800px;
height: 2800px;
margin-left: -1400px;
margin-top: 120px;
border: 2px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
pointer-events: none;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% 6%, 0 6%);
-webkit-mask-image: linear-gradient(to right,
transparent 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 80%,
transparent 100%);
mask-image: linear-gradient(to right,
transparent 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 80%,
transparent 100%);
animation: arcGlow 4s ease-in-out infinite 2s;
}
@media (max-width: 768px) {
.lectura {
margin-top: -0px !important;
overflow-x: hidden !important;
position: relative;
}
.card ul.inline {
margin-top: -130px;
}
.card ul.inline::before {
content: '';
position: absolute;
left: 50%;
width: 2800px;
height: 3800px;
margin-left: -1400px;
top: 320px;
border: 2px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
pointer-events: none;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% 4%, 0 4%);
-webkit-mask-image: linear-gradient(to right,
transparent 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 80%,
transparent 100%);
mask-image: linear-gradient(to right,
transparent 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 80%,
transparent 100%);
animation: arcGlow 4s ease-in-out infinite;
}
.titulo-constelacion {
padding-top: 20px;
margin-bottom: -40px !important;
font-size: 20px !important;
}
.titulo-constelacion span {
color: #ffd700;
font-family: 'Cinzel', serif;
font-size: 1.2em !important;
display: block;
margin-top: 8px;
padding: 5px;
margin: 6px;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
font-weight: bold;
}
.significado-constelacion {
font-style: italic;
color: #dcdcdc;
font-size: 0.95em;
line-height: 1.7;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 10px;
margin-top: 5px;
margin-bottom: -0px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
@keyframes arcGlow {
0%,
100% {
opacity: 0.95;
filter: brightness(1);
}
50% {
opacity: 0.94;
filter: brightness(.3);
}
}
.card li.carta-oculta {
transform: rotate(calc(var(--card-angle, 0deg) - 120deg)) !important;
opacity: 0;
filter: blur(0px);
pointer-events: none;
}
.card li.en-movimiento {
filter: blur(5px);
}
.card li.carta-saliendo-derecha {
transform: rotate(calc(var(--card-angle) + 120deg)) !important;
opacity: 0 !important;
transition-property: transform, opacity !important;
transition-duration: 8.0s, 0.5s !important;
transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease !important;
transition-delay: 0s, 7.5s !important;
pointer-events: none;
}
@media (min-width: 769px) {
.card li:not(.carta-revelada):hover {
transform: rotate(var(--card-angle)) translateY(-20px) scale(1.02);
z-index: 100;
}
}
@media (min-width: 769px) {
.card li:not(.carta-revelada):hover .cara {
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 5px #fff;
border: 1px solid rgba(255, 215, 0, 1);
}
}
.flipper-interno {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 2.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cara {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.7);
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cara img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.cara.dorso {
background: #1a1a1a;
transform: rotateY(0deg);
z-index: 2;
}
.cara.frente {
transform: rotateY(180deg);
}
.card li.carta-revelada {
z-index: 500 !important;
transform: rotate(var(--card-angle)) translateZ(110px) scale(1) !important;
pointer-events: none;
}
.card li.carta-revelada .flipper-interno {
transform: rotateY(180deg);
}
.card.mazo-oscuro li:not(.carta-revelada) {
pointer-events: none;
opacity: 0.1;
filter: grayscale(100%);
transition: opacity 0.8s ease, filter 0.8s ease;
}
.card.bloqueo-animacion li {
pointer-events: none !important;
}
html.bloqueo-scroll-horizontal,
body.bloqueo-scroll-horizontal {
overflow: hidden !important;
height: 100% !important;
touch-action: none !important;
position: relative;
}
#tarot-counter-premium,
.contador-modal-magico {
position: absolute;
top: -92px;
left: 53.5%;
transform: translateX(-50%);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
z-index: 50;
pointer-events: none;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.paso-indicador {
position: absolute;
top: 720px;
font-family: inherit;
font-weight: bold;
width: 100%;
font-size: 28px;
letter-spacing: 3px;
margin-top: -15px;
color: #ffffff;
text-shadow: 0 0 10px rgba(255, 255, 000, 0.6), 0 2px 4px rgba(0, 0, 0, 1.9);
opacity: 1;
z-index: 10;
pointer-events: none;
}
#tarot-modal-contenido .modal-step.paso-1 #tarot-counter-premium + .paso-indicador {
margin-top:106px;
}
@media (max-width: 768px) {
#tarot-modal-contenido .modal-step.paso-1 #tarot-counter-premium + .paso-indicador {
margin-top: 70px !important;
}
.paso-indicador {
position: absolute !important;
text-align: center;
margin-top: 70px;
padding-top: 10px;
margin-bottom: 10px !important;
font-size: 18px;
}
#tarot-modal-contenido .modal-step.paso-1 #tarot-counter-premium + .paso-indicador {
margin-top:6px;
}
}
@media only screen and (max-width: 768px) {
#tarot-modal-contenido #modal-pasos-wrapper .paso-indicador {
margin-top: 0px;
margin-bottom: 15px;
color: #ffffff;
text-align: center;
}
#tarot-counter-premium,
.contador-modal-magico {
padding-bottom: 15px;
position: absolute;
top: 0px;
transform: translateX(-50%);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 10px !important;
z-index: 50;
pointer-events: none;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.text-mystic {
font-family: 'Cinzel Decorative', serif;
font-size: 24px !important;
letter-spacing: 5px;
color: #ffffff;
font-style: italic;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 25px rgba(220, 165, 32, 0.5);
}
.contador-modal-magico {
position: relative;
top: 0;
left: 0;
transform: none;
margin-bottom: 20px;
}
}
.contador-modal-magico {
position: relative;
top: 0;
left: 0;
transform: none;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.paso-indicador {
position: relative;
width: 100%;
margin-bottom: -40px;
font-size: 15px;
top: 528px;
}
#tarot-counter-premium,
.contador-modal-magico {
position: absolute;
top: 0px;
width: auto;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center;
align-items: center;
gap: 5px !important;
z-index: 50;
pointer-events: none;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
#tarot-counter-premium span.text-mystic,
.contador-modal-magico span.text-mystic {
white-space: nowrap !important;
font-size: 24px !important;
letter-spacing: 2px !important;
}
#tarot-counter-premium .magic-circle,
.contador-modal-magico .magic-circle {
flex-shrink: 0 !important;
margin: 0 5px;
}
}
.contador-modal-magico {
position: relative;
top: 0;
left: 0;
transform: none;
margin-bottom: 20px;
}
.fondo-pregunta-final {
background: radial-gradient(circle at center, #2e1065 0%, #0f0518 100%);
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.9);
position: relative;
overflow: hidden;
}
.adorno-giratorio {
position: absolute;
opacity: 0.6;
animation: flotarMagico 5s ease-in-out infinite;
pointer-events: none;
}
.estrella-top-left {
top: -3%;
left: -0%;
width: 50px;
height: 50px;
animation-delay: 1s;
}
.luna-top-right {
top: -1%;
right: 2%;
width: 40px;
height: 40px;
animation-delay: 2s;
}
@keyframes flotarMagico {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(10deg);
}
}
.contenedor-pregunta-final {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #fff;
text-align: center;
padding: 20px;
z-index: 10;
position: relative;
}
.titulo-pregunta {
font-size: 36px;
color: #ffd700;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
}
.adorno-texto {
font-size: 30px;
animation: parpadeoSuave 2s infinite;
}
.subtitulo-pregunta {
font-size: 22px;
letter-spacing: 1px;
color: #e9d5ff;
margin-bottom: 35px;
opacity: 0.95;
font-style: italic;
font-weight: bold;
}
.input-wrapper-mistico {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(167, 139, 250, 0.5);
border-radius: 50px;
padding: 15px 10px;
width: 100%;
max-width: 700px;
margin-bottom: 30px;
box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
backdrop-filter: blur(5px);
}
.input-wrapper-mistico:focus-within {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 30px rgba(167, 139, 250, 0.4);
border-color: #ffd700;
transform: scale(1.02);
}
.input-wrapper-mistico.error-vibracion {
border-color: #ff6b6b;
box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
animation: vibrar 0.4s linear;
}
.decoracion-input {
color: #ffd700;
font-size: 18px;
margin: 0 10px;
opacity: 0.8;
}
#input-pregunta-usuario {
background: transparent;
border: none;
color: #fff;
font-size: 23px !important;
width: 100%;
outline: none;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
#input-pregunta-usuario::placeholder {
color: rgba(233, 213, 255, 0.3);
font-style: italic;
}
.lista-preguntas-sugeridas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
max-width: 700px;
margin-bottom: 35px;
}
.chip-pregunta {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 8px 16px;
color: #d8b4fe;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.chip-pregunta:hover {
background: rgba(167, 139, 250, 0.2);
border-color: #a78bfa;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.chip-pregunta.seleccionado {
background: rgba(255, 215, 0, 0.2);
border-color: #ffd700;
color: #ffd700;
}
.btn-mistico-final {
background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
padding: 16px 30px;
font-size: 18px;
letter-spacing: 2px;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s ease;
text-transform: uppercase;
position: relative;
overflow: hidden;
box-shadow: 0 10px 25px rgba(76, 29, 149, 0.4);
}
.btn-mistico-final .btn-brillo {
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transform: skewX(-20deg);
transition: 0.5s;
}
.btn-mistico-final:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(124, 58, 237, 0.6);
border-color: #ffd700;
}
.btn-mistico-final:hover .btn-brillo {
left: 150%;
transition: 0.7s ease-in-out;
}
.cartas-finales-grid {
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
margin-top: 30px;
}
.titulo-eleccion-final {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
color: #e0e0e0;
text-align: center;
margin-bottom: 30px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
animation: fadeIn 1s ease-out;
}
.carta-final-opcion:hover {
transform: translateY(-10px) scale(1.05);
z-index: 10;
}
@keyframes volteo-final {
0% {
transform: scale(1) translateY(0) rotateY(0deg);
box-shadow: none;
}
40% {
transform: scale(1.2) translateY(-20px) rotateY(0deg);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
100% {
transform: scale(1.5) translateY(-50px) rotateY(180deg);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 50px rgba(255, 215, 0, 0.3);
}
}
.carta-final-opcion.seleccionada-final {
z-index: 100;
animation-name: volteo-final;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.carta-final-inner.volteada {
transform: rotateY(180deg);
}
.carta-final-opcion .cara {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta-final-opcion .cara.frente {
transform: rotateY(180deg);
}
.mensaje-carta-final {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height:auto;
width: 280px;
margin-top: 25px;
text-align: center;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.titulo-si-no {
width: 310px;
border-radius: 8px;
letter-spacing: 0.7px;
padding-top: 13px;
padding-bottom: 10px;
background: black;
border-radius: 8px;
border: 1px solid rgba(255, 215, 0, 0.3);
letter-spacing: 0.7px;
margin-bottom: -5px!important;
margin-top: -12px!important;
font-size: 42px!important;
font-weight: 900 !important;
color: #ffd700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5);
line-height: 1;
animation: pulseText 2.5s infinite;
}
.frase-detalle {
font-size: 18px;
color: #ffff;
line-height: 1.5;
font-weight: 600 !important;
}
@media (max-width: 768px) {
.cartas-finales-grid {
gap: 10px;
margin-left: 20px;
}
.titulo-si-no {
font-size:14px !important;
width: 130px;
margin-top: -12px;
}
.frase-detalle {
font-size:  13px;
color: #ffff;
line-height: 1.5;
width: 210px;
}
.estrella-top-left {
top: 2%;
left: -2%;
width: 50px;
height: 50px;
animation-delay: 0s;
}
.luna-top-right {
top: 13%;
right: -2%;
width: 40px;
height: 40px;
animation-delay: 2s;
}
}
.mensaje-carta-final.visible {
opacity: 1;
}
.resultado-carta-final {
text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4);
margin-bottom: -60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
@keyframes pulseText {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
}
.shake-error {
animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
border-color: #ff6b6b !important;
box-shadow: 0 0 10px #ff6b6b !important;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes fadeInLectura {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.lectura-header {
text-align: center;
margin-bottom: 60px;
}
.lectura-titulo-principal {
font-size: 3em;
color: #ffd700;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
margin-bottom: 10px;
}
.lectura-subtitulo {
font-size: 1.2em;
color: #aaa;
font-family: 'Raleway', sans-serif;
}
.separador-magico {
height: 2px;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
margin: 30px auto;
width: 60%;
opacity: 0.7;
}
.separador-seccion {
grid-column: 1 / -1;
text-align: center;
font-size: 1.5em;
color: #d4af37;
margin: 40px 0 20px;
text-transform: uppercase;
letter-spacing: 3px;
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
padding-bottom: 10px;
}
.lectura-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
}
.tarjeta-lectura {
background: rgba(20, 20, 30, 0.8);
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 15px;
padding: 25px;
display: flex;
gap: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
backdrop-filter: blur(5px);
}
.tarjeta-lectura:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.1);
border-color: rgba(255, 215, 0, 0.5);
}
.tarjeta-col-img {
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
}
.marco-carta-lectura {
width: 100px;
height: 150px;
border-radius: 8px;
overflow: hidden;
border: 2px solid #d4af37;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.marco-carta-lectura img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nombre-arcano-lectura {
margin-top: 10px;
font-size: 0.8em;
color: #ffd700;
text-align: center;
}
.tarjeta-col-texto {
flex: 1;
}
.titulo-posicion-lectura {
font-size: 1.4em;
color: #fff;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 5px;
}
.btn-nueva-lectura {
background: transparent;
border: 2px solid #ffd700;
color: #ffd700;
padding: 15px 40px;
font-size: 1.2em;
font-family: 'Cinzel', serif;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 50px;
}
.btn-nueva-lectura:hover {
background: #ffd700;
color: #000;
box-shadow: 0 0 20px #ffd700;
}
@media (max-width: 768px) {
.lectura-grid {
grid-template-columns: 1fr;
}
.tarjeta-lectura {
flex-direction: column;
align-items: center;
text-align: center;
}
.titulo-posicion-lectura {
border-bottom: none;
margin-top: 10px;
}
}
#contenedor-cartas-finales {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 0px;
}
.instruccion-final-cartas {
width: 100%;
text-align: center;
font-size: 28px;
margin-bottom: 30px;
font-weight: 600;
letter-spacing: 2px;
background: linear-gradient(135deg, #ffd700 0%, #fff 50%, #ffd700 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.3);
filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.4));
animation: brilloSuave 3s ease-in-out infinite;
}
@keyframes brilloSuave {
0%,
100% {
filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.1));
}
50% {
filter: drop-shadow(0 4px 16px rgba(255, 215, 0, 0.6));
}
}
@media (max-width: 768px) {
.carta-final-opcion .cara {
position: absolute;
width: 140px!important;
height: 220px!important;
backface-visibility: hidden;
}
.titulo-pregunta {
font-size: 28px;
}
.subtitulo-pregunta {
font-size: 14px;
margin-bottom: 20px;
}
.input-wrapper-mistico {
padding: 8px 15px;
}
#input-pregunta-usuario {
font-size: 16px;
}
.carta-final-opcion {
width: 110px;
height: 170px;
}
}
.titulo-tiempo-elegante {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 200px;
text-align: center;
font-family: 'Cinzel Decorative', serif;
font-size: 22px;
color: #ffd700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: rgba(255, 215, 0, 0.5);
opacity: 0;
animation: fadeInTitulo 1s ease forwards 0.5s;
pointer-events: none;
}
@keyframes fadeInTitulo {
to {
opacity: 1;
}
}
@media (max-width: 768px) {
.titulo-tiempo-elegante {
font-size: 18px;
top: -30px;
}
}
.contador-modal-magico .text-mystic {
font-size: 35px;
color: #ffffff;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}
.contador-modal-magico .magic-circle {
width: 80px;
height: 80px;
}
.text-mystic {
font-family: 'Cinzel Decorative', serif;
font-size: 47px;
letter-spacing: 5px;
color: #ffffff;
font-style: italic;
text-shadow:
0 0 5px rgba(255, 255, 255, 0.7),
0 0 25px rgba(220, 165, 32, 0.5);
}
.magic-circle {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.magic-ring {
position: absolute;
width: 80%;
height: 80%;
border: 1px solid rgba(255, 215, 0, 0.4);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
animation: spinSlow 10s linear infinite;
}
.counter-number {
font-size: 55px;
font-weight: 700;
color: #ffd700;
z-index: 2;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}
.orbit-star {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: spinOrbit 6s linear infinite;
}
.orbit-star::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 8px #fff, 0 0 15px #ffd700;
transform: translate(-50%, -50%);
}
.orbit-star::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 8px #fff, 0 0 15px #ffd700;
transform: translate(-50%, 50%);
}
.cardinal-dot {
position: absolute;
width: 3px;
height: 3px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 6px #ffffff;
transform: translate(-50%, -50%);
}
.cardinal-dot.top {
top: 0;
left: 50%;
animation: blinkWhite 3s infinite;
}
.cardinal-dot.bottom {
top: 100%;
left: 50%;
animation: blinkWhite 4s infinite 0.5s;
}
.cardinal-dot.left {
top: 50%;
left: 0;
animation: blinkWhite 5s infinite 1s;
}
.cardinal-dot.right {
top: 50%;
left: 100%;
animation: blinkWhite 3.5s infinite 1.5s;
}
@keyframes spinSlow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spinOrbit {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes blinkWhite {
0%,
100% {
opacity: 0.3;
transform: translate(-50%, -50%) scale(0.8);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 0 0 12px #fff;
}
}
.number-fading-out {
opacity: 0;
transform: scale(0.5);
transition: all 0.3s ease;
}
.number-fading-in {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.cartas-en-modal {
gap: 5px !important;
padding: 10px 0 !important;
grid-template-columns: repeat(4, 1fr) !important;
}
.magic-circle {
width: 60px;
height: 60px;
}
.counter-number {
font-size: 35px;
font-weight: 700;
color: #ffd700;
z-index: 2;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}
.card {
height: 400px !important;
margin-top: 80px !important;
}
.card li {
width: 80px !important;
height: 150px !important;
margin-left: -42.5px !important;
transform-origin: 50% 55vh;
}
.card ul.inline {
transform: rotateX(0deg) translateY(0px) !important;
perspective: none !important;
}
}
@media (max-width: 768px) {
.mazo-listo #tarot-counter-premium,
.mazo-listo .contador-modal-magico {
margin-top: -100px;
left: 53%;
margin-bottom: -20px !important;
flex-direction: column;
gap: 5px;
}
#tarot-modal-contenido #tarot-counter-premium,
#tarot-modal-contenido .contador-modal-magico {
margin-top: -15px;
left: 53%;
margin-bottom: -20px !important;
flex-direction: column;
gap: 5px;
}
}
.card li.carta-brillando .cara {
box-shadow:
0 0 40px rgba(255, 215, 0, 0.9),
0 0 80px rgba(255, 215, 0, 0.6),
0 0 120px rgba(255, 215, 0, 0.3);
border-color: rgba(255, 215, 0, 1);
animation: pulsoDorado 1.5s ease-in-out;
}
@keyframes pulsoDorado {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.5);
}
}
@keyframes desvanecer {
0% {
opacity: 1;
transform: rotate(var(--card-angle)) translateY(0) scale(1);
filter: brightness(1.5);
}
100% {
opacity: 0;
transform: rotate(var(--card-angle)) translateY(-20px) scale(0.5);
filter: brightness(2) blur(4px);
}
}
@keyframes desvanecerMovil {
0% {
opacity: 1;
transform: rotate(var(--card-angle)) translateZ(0px) scale(1.2);
filter: brightness(1.5);
}
100% {
opacity: 0;
transform: rotate(var(--card-angle)) translateZ(0px) scale(0.8);
filter: brightness(2) blur(4px);
}
}
.card li.carta-desvaneciendo {
animation: desvanecer 1s ease-out forwards;
pointer-events: none;
}
.particula-contador {
position: absolute;
width: 8px;
height: 8px;
background: radial-gradient(circle, #ffd700, #ff8c00);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
box-shadow: 0 0 12px #ffd700, 0 0 24px #ffd700;
opacity: 1;
}
@keyframes viajeAlContador {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
80% {
opacity: 0.8;
transform: translate(var(--target-x), var(--target-y)) scale(0.8);
}
100% {
opacity: 0;
transform: translate(var(--target-x), var(--target-y)) scale(0.3);
}
}
.particula-dorada {
position: absolute;
width: 4px;
height: 4px;
background: #ffd700;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
box-shadow: 0 0 8px #ffd700, 0 0 16px #ffd700;
animation: particula 1.2s ease-out forwards;
}
@keyframes particula {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--dx), var(--dy)) scale(0);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.lectura-container-inline {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
color: #e0e0e0;
animation: fadeInLectura 2s ease-out;
}
@keyframes fadeInLectura {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.lectura-header {
text-align: center;
margin-bottom: -70px;
}
.lectura-titulo-principal {
font-size: 3em;
color: #ffd700;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
margin-bottom: 10px;
}
.lectura-subtitulo {
font-size: 1.2em;
color: #aaa;
font-family: 'Raleway', sans-serif;
}
.separador-magico {
height: 2px;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
margin: 30px auto;
width: 60%;
opacity: 0.7;
}
.separador-seccion {
grid-column: 1 / -1;
text-align: center;
font-size: 1.5em;
color: #d4af37;
margin: 40px 0 20px;
text-transform: uppercase;
letter-spacing: 3px;
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
padding-bottom: 10px;
}
.lectura-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
}
.tarjeta-lectura {
background: rgba(20, 20, 30, 0.8);
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 15px;
padding: 25px;
display: flex;
gap: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
backdrop-filter: blur(5px);
}
.tarjeta-lectura:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.1);
border-color: rgba(255, 215, 0, 0.5);
}
.tarjeta-col-img {
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
}
.marco-carta-lectura {
width: 100px;
height: 150px;
border-radius: 8px;
overflow: hidden;
border: 2px solid #d4af37;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.marco-carta-lectura img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nombre-arcano-lectura {
margin-top: 10px;
font-size: 0.8em;
color: #ffd700;
text-align: center;
}
.tarjeta-col-texto {
flex: 1;
}
.titulo-posicion-lectura {
font-size: 1.4em;
color: #fff;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 5px;
}
.texto-interpretacion {
font-size: 1em;
line-height: 1.6;
color: #ddd;
}
.lectura-conclusion {
margin-top: 80px;
text-align: center;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(50, 20, 60, 0.4) 100%);
padding: 40px;
border-radius: 20px;
border: 1px solid rgba(255, 215, 0, 0.3);
}
.titulo-conclusion {
font-size: 2.5em;
color: #ffd700;
margin-bottom: 30px;
}
.carta-conclusion-wrapper {
display: inline-block;
position: relative;
}
.carta-conclusion-img {
width: 180px;
border-radius: 10px;
box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
border: 3px solid #ffd700;
}
.texto-conclusion {
margin-top: 20px;
}
.frase-conclusion {
font-size: 1.8em;
font-style: italic;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.lectura-footer {
text-align: center;
margin-top: 60px;
}
.btn-nueva-lectura {
background: transparent;
border: 2px solid #ffd700;
color: #ffd700;
padding: 15px 40px;
font-size: 1.2em;
font-family: 'Cinzel', serif;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 50px;
}
.btn-nueva-lectura:hover {
background: #ffd700;
color: #000;
box-shadow: 0 0 20px #ffd700;
}
.dark-section {
margin-left: -60px;
}
@media (max-width: 768px) {
.dark-section {
margin-left: 0px;
}
.chip-pregunta {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 6px 10px;
color: #d8b4fe;
font-size: 11px;
cursor: pointer;
transition: all 0.3s ease;
}
.lista-preguntas-sugeridas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
max-width: 700px;
margin-bottom: 35px;
}
#input-pregunta-usuario {
background: transparent;
border: none;
color: #fff;
font-size: 13px !important;
width: 100%;
outline: none;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
#tarot-modal-contenido input[type="text"],
#tarot-modal-contenido input[type="email"] {
width: 100%;
padding: 12px 15px;
margin: 10px auto;
background-color: #333;
border: 1px solid rgba(255, 220, 150, 0.6);
color: #FFFFFF;
border-radius: 8px;
font-size: 1rem;
display: block;
}
.input-wrapper-mistico {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(167, 139, 250, 0.5);
border-radius: 50px;
padding: 5px 5px;
width: 130%;
max-width: 700px;
margin-bottom: 10px;
box-shadow: none;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
backdrop-filter: blur(5px);
border: 0px solid rgba(167, 139, 250, 0.5);
}
#tarot-modal-contenido .cartas-consejo-seleccion {
margin-left: -35px;
gap: 8px !important;
padding: 5px 5px !important;
grid-template-columns: repeat(2, 1fr) !important;
}
.carta-consejo-item .carta-modal-inner {
width: 110px !important;
height: 165px !important;
}
.chip-pregunta:nth-child(n+4) {
display: none;
}
#contador-paso-2 {
top: 20px !important;
padding-top: 0px;
left: 0px !important;
padding-bottom: 33px;
}
.lectura-grid {
grid-template-columns: 1fr;
}
.tarjeta-lectura {
flex-direction: column;
align-items: center;
text-align: center;
}
}
h2.espacio {
padding-top: 60px !important;
}
.card.bloqueo-total-mazo {
pointer-events: none !important;
cursor: not-allowed;
}
.card.bloqueo-total-mazo li {
pointer-events: none !important;
}
.carta-levantada {
transform: translateY(-60px) rotateY(180deg) !important;
opacity: 1 !important;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.6s ease;
}
.carta-desvaneciendo-suave {
opacity: 0 !important;
transform: translateY(-60px) rotateY(180deg) scale(0.85) !important;
transition: opacity 1.2s ease-out,
transform 1.2s ease-out !important;
}
.carta-invisible {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
}
.carta-eliminada {
display: none !important;
}
.carta-invisible-temporal {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
position: absolute !important;
z-index: -1 !important;
}
.card li {
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.carta-procesando {
pointer-events: none !important;
opacity: 0.5;
}
html,
body {
overflow-x: hidden !important;
width: 100%;
position: relative;
}
.carta-final-opcion.brillo-mistico-activo .carta-final-inner {
box-shadow: 0 0 30px #ffd700, 0 0 60px #ffaa00;
}
.carta-final-inner .cara {
margin-left: -10px;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.carta-final-inner .cara.dorso img,
.carta-final-inner .cara.frente img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carta-final-inner .cara.frente {
transform: rotateY(180deg);
}
.carta-final-opcion.brillo-mistico-activo .carta-final-inner {
box-shadow: 0 0 30px #ffd700, 0 0 60px #ffaa00;
animation: pulsoFinal 2s infinite;
}
@keyframes pulsoFinal {
0% {
box-shadow: 0 0 20px #ffd700;
}
50% {
box-shadow: 0 0 50px #ffd700, 0 0 80px #ffaa00;
}
100% {
box-shadow: 0 0 20px #ffd700;
}
}
.carta-final-opcion {
width: 140px;
height: 210px;
position: relative;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.carta-final-opcion.seleccionada-final .carta-final-inner {
animation: seleccionFinalMagica 3.5s forwards;
}
.carta-final-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.carta-final-inner.volteada {
transform: rotateY(180deg);
}
.carta-final-opcion .cara {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.carta-final-opcion .cara.dorso {
opacity: 1;
z-index: 2;
}
.carta-final-opcion .cara.frente {
opacity: 1;
z-index: 1;
transform: rotateY(180deg);
}
.mensaje-carta-final {
position: absolute;
top: 100%;
left: 50%;
width: 280px;
margin-top: 25px;
text-align: center;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.mensaje-carta-final.visible {
opacity: 1;
}
.texto-consejo-step {
z-index: 99999999 !important;
opacity: 0;
transition: opacity 1s ease;
text-align: center;
width: 80%;
position: fixed !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 12% !important;
font-size: 1.4rem !important;
color: #fff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
pointer-events: none;
}
.texto-consejo-step.visible {
opacity: 1 !important;
}
.carta-final-inner {
margin-left: -10px!important;
}
@media screen and (max-width: 767px) {
.carta-final-inner {
margin-left: -10px!important;
}
.texto-consejo-step {
bottom: 5px !important;
width: 90% !important;
font-size: 1.1rem !important;
background: rgba(10, 10, 10, 0.85);
padding: 15px;
border-radius: 12px;
border: 1px solid rgba(255, 215, 0, 0.3);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
}
}
.post-index label.checkbox input[type="checkbox"] {
display: none !important;
}
html {
scroll-behavior: smooth;
}
.post-index .toc-title::before {
content: "📜 ";
}
.eso-card-container-v6 {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.05);
max-width: auto;
position: relative;
padding-top: 0px;
padding-bottom: 25px;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}
.eso-card-title {
text-align: center;
color: #4B0082;
margin-top: 0;
font-size: 1.6rem;
line-height: 1.6;
}
.eso-card-body {
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: flex-start;
}
.eso-card-image {
flex: 0 0 240px;
margin: 0 auto;
}
.eso-card-image img {
margin-left: 30px;
border-radius: 8px;
display: block;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
animation: eso-glow 1s infinite alternate;
transition: transform 0.3s ease;
}
.eso-card-image img:hover {
transform: translateY(-5px) scale(1.02);
}
.eso-data-list {
padding: 0;
font-size: 0.85rem;
color: #555;
border-top: 2px solid #eee;
padding-top: 1rem;
}
.eso-data-list li {
font-size: 0.95rem!important;
margin-left: 10px!important;
margin-bottom: -8px;
line-height: 1.4;
display: flex;
justify-content: space-between;
border-bottom: 1px dotted #f0f0f0;
padding-bottom: 6px;
}
.eso-data-list strong {
color: #4B0082;
margin-right: 5px;
}
.eso-card-content {
flex: 1;
min-width: 280px;
}
.eso-intro {
margin-bottom: 1.5rem;
line-height: 1.6;
color: #444;
font-size: 1.1rem;
}
.eso-tabs-header {
display: flex;
gap: 5px;
border-bottom: 2px solid #eee;
margin-bottom: 0;
overflow-x: auto;
padding-bottom: 2px;
}
.eso-tab-btn {
background: none;
border: none;
padding: 10px 25px;
font-family: inherit;
font-weight: bold;
color: #888;
cursor: pointer;
border-radius: 8px 8px 0 0;
transition: all 0.3s;
font-size: 1rem;
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.eso-tab-btn:hover {
background-color: #f9f9f9;
color: #4B0082;
}
.eso-tab-btn.active {
background-color: #fff;
color: #4B0082;
border: 1px solid #eee;
border-bottom: 2px solid #fff;
margin-bottom: -2px;
box-shadow: 0 -2px 5px rgba(0,0,0,0.04);
}
.eso-tabs-body {
border: 1px solid #eee;
border-top: none;
padding-left: 35px;
padding-right: 25px;
background: #fff;
border-radius: 0 0 8px 8px;
min-height: 80px;
margin-bottom: 110px!important;
padding-top: 30px;
}
.eso-tab-content {
display: none;
animation: fadeEffect 0.5s;
}
.eso-tab-content p {
margin: 0;
line-height: 1.6;
}
@keyframes fadeEffect {
from {opacity: 0; transform: translateY(-5px);}
to {opacity: 1; transform: translateY(0);}
}
.eso-card-footer {
margin-top: -5rem;
display: flex;
justify-content: center;
margin-left: 190px;
gap: 1.5rem;
flex-wrap: wrap;
}
.btn-eso-primary, .btn-eso-ghost {
display: inline-block;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none !important;
font-weight: bold;
text-transform: uppercase;
font-size: 1rem;
transition: transform 0.2s, box-shadow 0.2s;
text-align: center;
}
.btn-eso-primary {
background: #4B0082;
color: #fff !important;
box-shadow: 0 4px 15px rgba(75,0,130,0.2);
}
.btn-eso-ghost {
background: transparent;
color: #4B0082 !important;
border: 2px solid #4B0082;
}
.btn-eso-primary:hover, .btn-eso-ghost:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(75,0,130,0.3);
}
@keyframes eso-glow {
0% { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
100% { box-shadow: 0 5px 25px rgba(212, 175, 55, 0.4); }
}
.eso-sparkle {
position: absolute;
font-size: 3rem;
color: #D4AF37;
opacity: 0.2;
pointer-events: none;
animation: eso-twinkle 3s infinite ease-in-out;
}
.top-right { top: -5px; right: 10px; transform: rotate(15deg); }
.bottom-left {
bottom: 50px; left: 122px; font-size: 3rem; animation-delay: 1.5s; }
@keyframes eso-twinkle {
0%, 100% { opacity: 0.1; transform: scale(0.8) rotate(0deg); }
50% { opacity: 0.4; transform: scale(1.1) rotate(10deg); }
}
@media (max-width: 600px) {
.eso-data-list {
padding: 0;
font-size: 0.85rem;
color: #555;
border-top: 2px solid #eee;
padding-top: 1rem;
margin-bottom: -20px!important;
}
.eso-card-container-v6 {
padding-left: 15px;
padding-right: 15px;
width: 100%;
box-sizing: border-box;
}
.eso-card-image img {
margin-left: 0;
margin: 0 auto;
max-width: 100%;
}
.eso-tabs-body {
padding-left: 15px;
padding-right: 15px;
margin-bottom: -60px !important;
}
.eso-card-footer {
margin-left: 0;
margin-top: 0;
justify-content: center;
flex-direction: column;
gap: 5px;
width: 100%;
}
.btn-eso-primary, .btn-eso-ghost {
width: 100%;
box-sizing: border-box;
margin: 0;
}
.eso-tabs-header {
justify-content: space-between;
}
.eso-tab-btn {
padding: 10px 5px;
font-size: 0.9rem;
flex: 1;
justify-content: center;
}
}
#xen-tarot-wrapper {
background-color: #ffffff;
color: #333;
padding: 0px 0px;
width: 100%;
box-sizing: border-box;
line-height: 1.4;
}
.xen-grid-matrix {
display: grid;
gap: 11px;
margin: 0 auto !important;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
}
@media (min-width: 768px) {
.xen-grid-matrix {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.xen-grid-matrix {
grid-template-columns: repeat(5, 1fr);
}
}
.xen-card-module {
background: #fff;
border-radius: 10px;
overflow: hidden;
text-align: center;
text-decoration: none;
color: inherit;
transition: transform 0.35s ease, box-shadow 0.35s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
border: 1px solid #eaeaea;
display: flex;
flex-direction: column;
height: 100%;
display: flex !important;
}
.xen-card-module[div] {
cursor: default;
}
.xen-card-module:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 18px 35px rgba(0,0,0,0.12);
border-color: #d4af37;
z-index: 5;
}
.xen-visual-capsule {
width: 100%;
height: 70%;
aspect-ratio: 3 / 5;
overflow: hidden;
background: #fdfdfd;
position: relative;
display: flex;
}
.xen-visual-capsule img {
display: block;
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
.xen-card-module:hover .xen-visual-capsule img {
transform: scale(1.0);
}
.xen-data-layer {
padding: 0px 6px 0px 6px!important;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-top: 1px solid #f4f4f4;
min-height: 90px;
flex-grow: 1;
}
.xen-id-badge {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: #d4af37;
margin-bottom: 10px !important;
text-transform: uppercase;
letter-spacing: 1px;
}
.xen-title-string {
display: block;
font-size: 1rem;
font-weight: 600;
color: #444;
line-height: 1.3;
padding: 0 4px;
}
@media (max-width: 380px) {
.xen-title-string {
font-size: 0.85rem;
}
.xen-id-badge {
font-size: 0.9rem;
}
}