/* CSS DEL CUERPO GENERAL: COLOR, TIPOGRAFÍA */
body {
    font-family: var(--font-f-letrabase);
    font-size: var(--font-s-works);
    font-weight: var(--font-w-regular);
    background-color: var(--col-base-background);
}

/* ALTERAMOS EN LA HOME EL PADDING PARA QUE EL TEXTO DEL FONOD SE PEGUE AL FOOTER */
/* PADDDING PARA LOS MONITORES DE TORRE MAYORES A UN PORTÁTIL */
.padding {
    padding-bottom: 0%;
}

/* VOLVEMOS A NOMBRAR EL Z-INDEX DEL HEADER EN LA HOME POR LOS CONTENEDORES RELATIVE, EL ZINDEX DEL CSS GENERAL NO LES AFECTA */
header {
    z-index: 4;
}








/* POSICIÓN RELATIVA DEL CONTENEDOR PARA LOS ELEMENTOS DE DENTRO */
/* COMIENZA CON 0 DE OPACIDAD */
.contenedor {
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

/* SE APARECE CON 1 DE OPACIDAD */
.contenedor.appear {
    opacity: 1;
}

/* CSS DEL DIV DEL TEXTO, OCUPA LA IMAGEN, POSICIÓN ABSOLUTA, OPACIDAD INICIAL 0, COLOR DEL FONDO Y TRANSICIÓN QUE SE REALIZARÁ */
.card__text {
    width: 100%;
    height: 100%;
    position: absolute;
    color: var(--col-font-background);
    bottom: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.8);
    transition: opacity 0.5s ease;
}

/* AL PASAR EL RATÓN, LA OPACIDAD ES COMPLETA */
.card__text:hover {
    opacity: 1;
    color: var(--col-font-background);
}

/* CSS TEXTO DEL DIV, ABSOLUTO RESPECTO AL DIV, CENTRADO Y TRANSICIÓN DE OPACIDAD COMO EL FONDO */
.card__text p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100vh;
    transition: opacity 0.5s ease;
}

/* ESTABLECER LA GRID DEL PRIMER GRUPO */
.grupo1 {
    padding: var(--padding-grids-home);
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
    gap: 15px;
    grid-auto-rows: 25vw;
}

/* TAMAÑO DE LAS IMÁGENES Y ENCAJONAMIENTO EN EL CONTENEDOR */
.grupo1-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}








/* FUENTE Y PADDING PRINCIPAL DE LOS SUBTÍTULOS */
.stock-ticker {
    font-family: var(--font-f-letrapixel);
    font-size: 2vw;
    padding-block: 20px;
    overflow: hidden;
    user-select: none;
    --gap: 20px;
    display: flex;
    gap: var(--gap);
}

/* ESTILOS DE LA TABLA DE SUBTÍTULOS Y ANIMACIÓN DE MOVIMIENTO */
.stock-ticker ul {
    list-style: none;
    flex-shrink: 0;
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);

    animation: scroll 20s linear infinite;
}

/* AJUSTE DEL ESPACIO DENTRO DE LAS LETRAS */
.stock-ticker .tres-de {
    margin-inline: 4px;
    transition: 0.5s ease-in-out;
    color: white;
}

/* AL HACER HOVER SOBRE LAS PALABRAS */
.stock-ticker .tres-de:hover {
    color: #7f64b3;
}

/* AL TOCARLO SE PAUSA */
.stock-ticker:hover ul {
    animation-play-state: paused;
}

/* PUNTO DE INICIO DE LA ANIMACIÓN */
@keyframes scroll {
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}








/* POSICIÓN RELATIVA DEL CONTENEDOR PARA LOS ELEMENTOS DE DENTRO */
/* COMIENZA CON 0 DE OPACIDAD */
.contenedor2 {
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

/* SE APARECE CON 1 DE OPACIDAD */
.contenedor2.appear {
    opacity: 1;
}

/* ESTABLECER LA GRID DEL SEGUNDO GRUPO */
.grupo2 {
    padding: var(--padding-grids-home);
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
    gap: 15px;
    grid-auto-rows: 25vw;
}

/* TAMAÑO DE LAS IMÁGENES Y ENCAJONAMIENTO EN EL CONTENEDOR */
.grupo2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}








/* POSICIÓN RELATIVA DEL CONTENEDOR PARA LOS ELEMENTOS DE DENTRO */
/* COMIENZA CON 0 DE OPACIDAD */
.contenedor3 {
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

/* SE APARECE CON 1 DE OPACIDAD */
.contenedor3.appear {
    opacity: 1;
}

/* ESTABLECER LA GRID DEL TERCER GRUPO */
.grupo3 {
    padding: var(--padding-grids-home);
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
    gap: 15px;
    grid-auto-rows: 25vw;
}

/* TAMAÑO DE LAS IMÁGENES Y ENCAJONAMIENTO EN EL CONTENEDOR */
.grupo3-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}








/* POSICIÓN RELATIVA DEL CONTENEDOR PARA LOS ELEMENTOS DE DENTRO */
/* COMIENZA CON 0 DE OPACIDAD */
.contenedor4 {
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

/* SE APARECE CON 1 DE OPACIDAD */
.contenedor4.appear {
    opacity: 1;
}

/* CSS DEL APARTADO DE MOTION GRAPHICS Y REESCALAR EL MOTION*/
.grupo4 {
    padding: var(--padding-grids-home);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* TAMAÑO DE LAS IMÁGENES Y ENCAJONAMIENTO EN EL CONTENEDOR */
.img-motion {
    width: 100%;
    height: 100%;
    object-fit: cover;
}








/* CENTRAR EL APARTADO DE CONTACTME Y REESCALAR LA IMAGEN */
.contactme {
    display: flex;
    flex-direction: column;
    /* align-items:left; */
    text-align: left;
}

.flechas {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 2rem;
  margin-top: 2rem;
}

.image-container {
  position: relative;
  width: 20vw;
  cursor: pointer;
}

.img-hover {
  width: 100%;
  display: block;
}

.img-hover-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.image-container:hover .img-hover-top {
  opacity: 1;
}