body {
    background-color: #f5f2e2;
    font-family: 'Font';
    color: #22382b;
}
@font-face {
    font-family: 'Font';
    src: url(/font.ttf);
}

a {
    color: #02452d;
}
a:hover {
    color: #082118;
    text-decoration: none;
}
nav {
    background-color: #f5f2e2;
}

.header {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

text-align: center;
}
.header img {
    max-width: 500px;
}

.historia {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header-contenido {
    padding-top: 120px;
    text-align: center;
}


.cuerpo .historia, .cuerpo .destino, .cuerpo .dress-code, .cuerpo .destino {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cuerpo .row{
    max-width: 350px;
}

.itinerario {
  padding-top: 150px;
}

/* Contenedor general */
.cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

/* Carta */
.flip-card {
  width: 400px;
  height: 460px;
  perspective: 1000px; /* profundidad 3D */
}

/* Contenido interior (lado frente + reverso) */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Al pasar el cursor, giramos */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Cara frontal y trasera */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 20px;
  text-align: center;
}

/* Colores y reversos distintos */
.flip-card-front {
  background-image: url(/img/itinerario.png);
  background-color: #f5f2e2;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.flip-card-back {
  background-image: url(/img/itinerario.png);
  background-color: #f5f2e2;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotateY(180deg);
}

/* Segunda carta */
.card2 .flip-card-front {
  background-image: url(/img/itinerario.png);
  background-color: #f5f2e2;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.card2 .flip-card-back {
  background-image: url(/img/itinerario.png);
  background-color: #f5f2e2;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotateY(180deg);
}

/* Tercera carta */
.card3 .flip-card-front {
  background-image: url(/img/itinerario.png);
  background-color: #f5f2e2;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.card3 .flip-card-back {
  background-image: url(/img/itinerario.png);
  background-color: #f5f2e2;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotateY(180deg);
}




 /* Reset muy ligero */
 * { box-sizing: border-box; margin: 0; padding: 0; }

 /* Fondo y centrado 3D-friendly */
 html, body {
   height: 100%;
 }


 /* Número grande (arriba) */
 .count {
   font-weight: 800;
   letter-spacing: -1px;
   display: block;
   font-size: clamp(36px, 8vw, 96px); /* responsivo */
   line-height: 1;
   margin-bottom: 12px;
   color: #1e2329;
   text-shadow: 0 6px 30px rgba(3,7,18,0.6);
 }

 /* Texto descriptivo (abajo) */
 .labels {
   font-weight: 500;
   font-size: clamp(12px, 2.2vw, 18px);
   color: #1e2329;
   opacity: 0.95;
   display: flex;
   gap: 18px;
   justify-content: center;
   flex-wrap: wrap;
 }

 .labels .unit {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 76px;
 }

 .labels .unit .value {
   font-weight: 700;
   font-size: 28px;
   color: #1e2329;
   margin-bottom: 6px;
 }

 /* texto pequeño explicativo bajo todo */
 .hint {
   margin-top: 14px;
   font-size: 12px;
   color: #93a6bf;
   opacity: 0.9;
 }

 /* móvil: espaciado */
 @media (max-width:420px) {
   .card { padding: 22px; }
   .labels .unit { min-width: 60px }
 }

 section.galeria {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4rem 2rem;
    gap: 1.5rem;
    scroll-behavior: smooth;
  }

  .foto {
    flex: 0 0 auto;
    width: 240px;
    max-width: 40vw;
    position: relative;
    opacity: 0;
    transform: translateY(40px) scale(0.95) rotate(0deg);
    border: 6px solid #fff;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: all 0.9s cubic-bezier(.21,1.01,.64,1.01);
  }

  .foto.visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--rot));
  }

  .foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
  }

  @media (max-width: 768px) {
    section.galeria {
      padding: 2rem 1rem;
      gap: 1rem;
    }
    .foto {
      width: 160px;
      border-width: 4px;
    }
  }

  @media (max-width: 480px) {
    .foto {
      width: 130px;
      border-width: 3px;
    }
  }

  .datos{
    height: 450px;
    width: auto;
    justify-content: center;
    align-items: center;
    
  }

  .transfer {
    height: 450px;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-image: url(/img/transfer.png);
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .recomendaciones button {
    background-color: transparent !important;
    border: none;
    color: #02452d;
  }

  .recomendaciones button:hover {
    color: #690000 !important;
  }