/* Importación de fuentes medievales */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Cardo:wght@400;700&display=swap');

/* Variables personalizadas para estilo medieval */
:root {
  --color-principal: #4B3A2F;       /* Marrón oscuro tipo madera */
  --color-fondo: #1C1C1C;           /* Negro carbón */
  --color-secundario: #2E2B26;      /* Gris-marrón rústico */
  --color-texto: #F5F5DC;           /* Beige pergamino */
  --color-dorado: #D4AF37;          /* Dorado antiguo */

  --font-heading: 'Uncial Antiqua', cursive;
  --font-body: 'Cardo', serif;
}

/* General */
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-body);
}

p {
  color: var(--color-texto);
}

/* Títulos con estilo decorativo */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-dorado);
  text-shadow: 1px 1px 2px black;
}

/* Enlaces medievales */
a {
  color: var(--color-dorado);
  text-decoration: none;
}
a:hover {
  color: var(--color-principal);
}

/* Botones personalizados */
.btn-1830 {
  background-color: var(--color-principal);
  color: var(--color-texto);
  border: 2px solid var(--color-dorado);
  font-family: var(--font-heading);
  padding: 0.6em 1.2em;
  text-transform: uppercase;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease-in-out;
  transform: translateY(0);
}

.btn-1830:hover {
  background-color: var(--color-dorado);
  color: #1C1C1C;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}


/* Navbar estilo rústico */
.navbar {
  background-color: var(--color-fondo);
  border-bottom: 2px solid var(--color-dorado);
}
.navbar-brand, .nav-link {
  color: var(--color-texto) !important;
  font-family: var(--font-heading);
}
.nav-link:hover {
  color: var(--color-dorado) !important;
  font-style: italic;
  font-weight: bolder;  
}

/* Secciones oscuras */
.section-dark {
  background-color: var(--color-secundario);
  padding: 4rem 0;
}

/* Íconos dorados */
.fa {
  color: var(--color-dorado);
}

/* Footer con ornamento */
footer {
  background-color: var(--color-secundario);
  color: var(--color-texto);
  padding: 2rem 0;
  text-align: center;
  border-top: 1px solid var(--color-dorado);
}

/* Dropdown personalizado */
.dropdown-menu {
  background-color: var(--color-secundario);
  border: 1px solid var(--color-dorado);
  border-radius: 0.3rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

.dropdown-item {
  color: var(--color-texto);
  font-family: var(--font-body);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-dorado);
  color: var(--color-principal);
  font-style: italic;
  font-weight: bolder;
}

/* Carrusel medieval */
.carousel-inner img {
  height: 400px;
  object-fit: contain;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-dorado);
}

/* Imagenes de tarjetas */
.card-img-top {
  height: 400px;
  object-fit: contain;
  border: 1px solid var(--color-dorado);
}

/* Sección con bandera o fondo especial */
.bandera {
  background: url('../assets/banderaValencia.png') no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-body);
}

/* Full width */
.width100 {
  width: 100%;
}

/* Secciones con video o imagen fija */
section.position-relative {
  height: 70vh;
}

video.object-fit-cover {
  object-fit: cover;
}

/* Formulario medieval */
input, textarea {
  color: var(--color-texto) !important;
  background-color: #2e2b26;
  border: 1px solid var(--color-dorado);
  padding: 0.5rem;
  font-family: var(--font-body);
}
input::placeholder,
textarea::placeholder {
  color: #d3c6a1;
  font-style: italic;
}


.flip-card {
  background-color: transparent;
  perspective: 1000px;
  height: 100%;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  border: 1px solid var(--color-dorado);
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: var(--color-secundario);
  color: var(--color-texto);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-card-front {
  z-index: 2;
}

.flip-card-back {
  transform: rotateY(180deg);
}


.card{
    max-width: 400px;
    height: 400px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    background: transparent;
    border: none;
    border-radius: 0px;
}

.box{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    transition: 2s ease;
}

.card-img{
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    height: 400px;
    border-radius: 0px;
}

.card-body{
    position: absolute;
    top: 0;
    left: 0;
    background: #1f1f1f;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.card-body .description{
    transform-style: preserve-3d;
    padding: 30px 20px;
    color: #f1f1f1;
    transform: translateZ(100px) !important;
    height: 80%;
   /* background: #cebb14;   fallback for old browsers */
    background: -webkit-linear-gradient(to right, #6e6700, #3f0000);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #6e6700, #3f0000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.description span{
    color: #f0f0f0;
}

.card:hover .box {
    transform: rotateY(180deg);
    font-size: .9rem;
}

.dropdown-item.active {
  background-color: var(--color-principal); /* o cualquier color distintivo */
  color: var(--color-dorado ) !important;  /* contraste para que se vea bien */
  font-weight: bold;
}


/*media logo*/
.logo {
    width: 5.5vw;
    height: 5vw;
}

@media (min-width: 681px) and (max-width: 991px) {
    .logo {
        width: 7vw;
        height: 7vw;
    }
}

@media (min-width: 410px) and (max-width: 680px) {
    .logo {
        width: 10vw;
        height: 10vw;
    }
}

@media (max-width: 409px) {
    .logo {
        width: 12vw;
        height: 12vw;
    }
}