:root {
    --header-title-color: #DADADA;
    --header-subtitle-color: #C5C5C5;
}

#header {
    position: relative;
    height: 60vh;
    overflow-x: hidden;
    background-color: black;
    clip-path: ellipse(110% 120% at 50% -20%);
}

#header .title {
    color: var(--header-title-color);
}

#header .subtitle {
    color: var(--header-subtitle-color);
}

#header .container {
    max-width: 400px;
    position: absolute;
    top: 40%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

#header .container #text {
    font-size: 16px;
}

#header .container #text::after {
    content: "|";
    font-size: 20px;
    color: var(--primary-color);
    animation: textIndicator 1s step-end infinite;
}
#header .container #text.writing::after {
    animation: none;
}

.container.services .item-image {
    aspect-ratio: 16 / 9;
}

.container.services .item-image img {
    transition: .2s ease scale;
}

.container.services .wrapper-item:hover .item-image img {
    scale: 1.05;
}

@keyframes textIndicator {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* ==========================================
   AJUSTE BLOQUE SERVICIOS - PORTADA
========================================== */

/* Acercar el contenido al carrusel */
#main .notifications + .section {
    padding-top: 0;
}

/* Separar las tarjetas del texto */
#main .notifications + .section .container.services {
    margin-top: 50px;
}

.container.services .wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.container.services .wrapper-item {
    max-width: none;
    min-width: 0;
}

.container.services .item-title {
    text-align: center;
}

.container.services .item-content p {
    text-align: justify;
}

.container.services .item-title {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

/* ==========================================
   AJUSTES - FRANJA Y OPINIONES
========================================== */

/* Franja "Más de 19 años" */
#main > .section.section-background {
    padding: 75px 0;
}

/* Separación entre franja y opiniones */
#main > .section.section-background + .section.reviews {
    padding-top: 55px;
}

/* Separación entre texto y tarjetas de opiniones */
#main .section.reviews .container {
    margin-top: 40px;
}

/* ==========================================
   AJUSTES FINALES - MAPA
========================================== */

#main > .section.location {
    padding-top: 50px;
}

/* ==========================================
   OPINIONES
========================================== */

.section.reviews .name {
    text-align: center;
}

.section.reviews .review {
    text-align: justify;
}

@media (max-width: 800px) {

    .container.services .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 20px;
    }

    .container.services .wrapper-item {
        width: 100%;
        max-width: 360px;
    }

}