/*
:root{
  --principal: #3260ab;
  --secundario: #ffffff;
  --boton_principal: #fff300;

}*/
*{
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
 :root {
            --primary-color: #0ec0c1;
            --dark-color: #333;
            --light-color: #f4f4f4;
            --accent-color: #014b4c;
            --text-color: #444;
        }


 .hero-parte{
     background-color:var(--primary-color)!important;
 }
.hero-centro{
     background-color:var(--dark-color)!important;
 }

 .bg-navy {
  background-color: var(--light-color);
 }

 .nav-link{
  color: var(--secundario) !important;
 }
 .search-btn {
  background-color: var(--boton_principal); border: none;
 }
 footer {
  color: var(--light-color);
  background-color: var(--dark-color);
 }
 footer a {
  color: var(--secundario); text-decoration: none;
 }
 footer a:hover {
  text-decoration: underline;
 }

 .btn{
     background-color:var(--primary-color)!important;border: none;
 }
 .btn:hover{
     background-color:var(--accent-color)!important;
 }
 .introduccion{
      background-color: var(--text-color);
 }
 /* Clase que aplicaremos a cada tarjeta */
  .diagonal-appear {
    opacity: 0;
    transform: translate(-30px, -30px); /* Inicia desplazado */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.diagonal-appear.visible {
    opacity: 1;
    transform: translate(0, 0); /* Se mueve a su posición original */
}

/* Retrasos escalonados */
.row_card > [class*="col-"]:nth-child(1) {
    transition-delay: 0.1s;
}
.row_card > [class*="col-"]:nth-child(2) {
    transition-delay: 0.2s;
}
.row_card > [class*="col-"]:nth-child(3) {
    transition-delay: 0.3s;
}/* Efecto flip: contenedor con perspectiva */
/* Contenedor para efecto flip con perspectiva */
.flip-card {
  perspective: 1000px;
}

/* Contenedor interno que realiza la transición con altura extendida */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 350px; /* Altura extendida para dar espacio al título largo */
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Al hacer hover, se rota la tarjeta para mostrar la segunda cara */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Estilos para ambas caras */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


/* Reservamos un espacio fijo para el título en la cara frontal */
.fixed-title {
  min-height: 70px;  /* Ajusta este valor según tus necesidades */
  overflow: hidden;
}

/* Mantenemos la transición hover original de la tarjeta */
.card_vista_previa {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card_vista_previa:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 10px 1px var(--text-color);
}

/* Si deseas conservar el efecto fade en la descripción */
.card-description {
  position: relative;
  height: 100px;
  overflow: hidden;


}
.card-title {
    position: relative;
    height: 70px;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Opcional: Centra horizontalmente */
    text-align: center; /* Opcional: Asegura que el texto esté centrado */
    overflow: hidden;
}

.card-description.fade-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}
.card-header{
    background-color: var(--dark-color) !important;
    color: var( --light-color);
}
/* Cambiar color de fondo del dropdown */
.dropdown-menu {
  background-color: #f4f4f4 !important;
}

/* Estilo hover para ítems del dropdown */
.dropdown-item:hover {
  background-color: #0ec0c1 !important;
  color: var(--light-color) !important;
}

/* Mostrar dropdown al pasar el cursor */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

.nav-link:hover {
  background-color: #0ec0c1 !important;
  color: var(--light-color) !important;
}