/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */

 .tm-headerbar, .tm-navbar, .tm-footer {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.uk-navbar {
   background: rgba(0,0,0,0) !important;
}

.contenedor-tarot {
  position: relative;
  width: 100%;
  height: 400px;
  perspective: 1000px; /* ¡CRUCIAL para 3D! */
}

.carta-tarot {
  position: absolute;
  width: 120px;
  height: 200px;
  transform-style: preserve-3d; /* ¡CRUCIAL para 3D! */
  transition: transform 0.3s ease;
  cursor: pointer;
  left: 50%; /* Posición inicial centrada */
  top: 50%;
  border-radius: 5px;
  border:0.5px solid #444;
  box-shadow: 0 0 7px 4px rgba(0,0,0,0.3);
}

/* Caras de la carta */
.cara-reverso,
.cara-frente {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* ¡CRUCIAL para 3D! */
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cara-reverso {
  background: #ba8249;
  border:0.5px solid #444;
  transform: rotateY(0deg); /* Cara visible inicialmente */
}

.cara-frente {
  background: white;
  transform: rotateY(180deg); /* Cara oculta inicialmente */
}

.patron-tarot {
  background-image: url(../images/back_img.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 80%;
  height: 85%;
  border: 2px solid #cdad8a;
  border-radius: 5px;
}

.cara-frente img {
  width: 80px;
  height: 120px;
  object-fit: cover;
}

.cara-frente h3 {
  margin: 5px 0;
  font-size: 14px;
}

.cara-frente p {
  font-size: 12px;
  text-align: center;
  padding: 0 5px;
}