@font-face {
    font-family: 'fuenteTitulo';
    src: url(../Fonts/Gotham-Bold.otf) format('opentype');
}
@font-face {
    font-family: 'fuenteParrafo';
    src: url(../Fonts/Gotham-Book.otf) format('opentype');
}
:root{
    --blanco: #ffffff;
    --negro: #212121;
    --verdeMarino: #0097a7;
    --gris: #757575;
    --grisClaro: #f0f0f0;

    --fuenteTitulo: 'fuenteTtitulo', sans-serif;
    --fuenteParrafo: 'fuenteParrafo', sans-serif;
}

html{
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-width: none;
    width: 100%;
}

body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overflow-x: hidden;
    scrollbar-width: none;
}


*, *::before, *:after{
    box-sizing: inherit;
}

h1{
    font-size: 3.8rem;
}
h2{
    font-size: 2.8rem;
}
h3{
    font-size: 1.8rem;
    font-weight: bold;
}
h4{
    font-size: 1.2rem;
    font-family: var(--fuenteParrafo);
    color: var(--gris);
}
h1, h2, h3{
    text-align: center;
    font-family: var(--fuenteTitulo);
}
p, a{
    font-family: var(--fuenteParrafo);
    font-size: 1.5rem;
    text-align: left;
}

/* Inicialmente, los elementos están ocultos y desplazados */
.fade-left, .fade-right, .fade-up, .fade-down, .fade-up {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}
  
.fade-left {
    transform: translateX(-100px); /* Desplazado hacia la izquierda */
}
  
.fade-right {
    transform: translateX(100px); /* Desplazado hacia la derecha */
}

.fade-down{
    transform: translateY(100px);
}

.fade-up{
    transform: translateY(-100px);
}
  
  /* Cuando el elemento entra en la vista, le añadimos la clase 'show' */
.fade-left.show, .fade-right.show, .fade-down.show, .fade-up.show {
    opacity: 1;
    transform: translateX(0); /* Regresa a su posición original */
}

.contenedor-card:hover {
    transform: scale(1.05); /* Aumenta el tamaño un 5% */
}

.none{
    display: none;
}

.bolder{
    font-weight: bolder;
}


/* Estilo para el enlace activo con línea debajo */
/* Aumenta la especificidad del enlace activo */