* { margin: 0px;padding: 0px; outline: 0;} 
html {width: 100%;height:100%;} 

/* Estado inicial */
#_main {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease, transform 1s ease;
}

/* Estado cuando desaparece */
#_main.fade-out {
  opacity: 0;
  transform: translateY(-50px);
  pointer-events: none;
}


.card
{
      width:100%;
      height:100%;
      position:relative;
      transform-style:preserve-3d;
      transition:transform var(--transition);
      cursor:pointer;
      border-radius:var(--radius);
      box-shadow: 0 10px 30px rgba(20,30,60,0.12);
      user-select:none;
      -webkit-tap-highlight-color: transparent;


}


.card.is-flipped
{
      transform: rotateY(180deg); /* giro horizontal */
}

.face
{
      position:absolute;
      inset:0;
      width:100%;height:100%;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
      box-sizing:border-box;
}

.front
{
  //background: blue;
}

.back
{
    //background: linear-gradient(180deg,#ffdbe6,#fff0f7);
      transform: rotateY(180deg);
}

.move
{
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

.f1
 {
    font-family: "Hammersmith One", sans-serif;
    font-weight: 400;
    font-style: normal;
 }


.f2
 {
   font-family: "Playfair Display", serif;
   font-optical-sizing: auto;
   font-weight: <weight>;
   font-style: normal;
 }


.f3
 {
   font-family: "Barlow Semi Condensed", sans-serif;
   font-style: normal;
 }


#contenedormapa 
{
  -webkit-mask-image: url('../Imagenes/mapa3.png');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  //-webkit-mask-position: center;
  
  mask-image: url('../Imagenes/mapa3.png');
  mask-size: contain;
  mask-repeat: no-repeat;
  //mask-position: center;
  
  overflow: hidden;
}


.contenedor 
{
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
}

.contenedor > div 
{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

  /* Caras del cubo */
  #a { transform: rotateY(0deg) translateZ(150px); }      /* Frente */
  #b { transform: rotateY(90deg) translateZ(150px); }     /* Derecha */
  #c { transform: rotateY(180deg) translateZ(150px); }    /* Atrás */
  #d { transform: rotateY(-90deg) translateZ(150px); }    /* Izquierda */
  #e { transform: rotateX(90deg) translateZ(150px); }     /* Arriba */
  #f { transform: rotateX(-90deg) translateZ(150px); }    /* Abajo */



  .btn {
    background: #ff8c26;
    color: #fff;
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 10px;
    font-weight: 600;
    transition: background 0.25s;
  }
  .btn:hover { background: #f67600; }


  .toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s, transform 0.5s;
    z-index: 9999;
  }

  .tooltip {
    position: absolute;
    background: black;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
    max-width: 200px;
    word-wrap: break-word;
    transform: translateY(10px); /* empieza un poco más abajo */
  }