:root {
    --azul-fondo: #011627;
    --azul-panel: #061f35;
    --azul-panel-2: #082b45;
    --turquesa: #4ce6d4;
    --turquesa-suave: rgba(76, 230, 212, 0.16);
    --blanco: #fafbfd;
    --gris: #b9c6d3;
    --gris-oscuro: #7c8b99;
    --negro-suave: rgba(0, 0, 0, 0.24);
    --borde: rgba(250, 251, 253, 0.1);
    --sombra: 0 2.4rem 6rem rgba(0, 0, 0, 0.35);
    --radio: 2.4rem;
    --radio-sm: 1.4rem;
    --contenedor: 118rem;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    font-size: 1.6rem;
    font-family: "Outfit", Arial, sans-serif;
    color: var(--blanco);
    background:
        radial-gradient(circle at top left, rgba(76, 230, 212, 0.12), transparent 34rem),
        radial-gradient(circle at 85% 15%, rgba(76, 230, 212, 0.08), transparent 28rem),
        var(--azul-fondo);
    line-height: 1.6;
}

body::selection {
    background-color: var(--turquesa);
    color: var(--azul-fondo);
}

img,
video,
picture {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    line-height: 1.08;
    letter-spacing: -0.04em;
}

h1 {
    margin-bottom: 2rem;
    font-size: clamp(4rem, 8vw, 7.8rem);
    color: var(--blanco);
}

h2 {
    margin-bottom: 1.8rem;
    font-size: clamp(3.2rem, 5vw, 5.2rem);
    color: var(--blanco);
}

h3 {
    font-size: 2.3rem;
    color: var(--blanco);
}

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

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contenedor {
    width: min(92%, var(--contenedor));
    margin: 0 auto;
}

.seccion {
    padding: 8rem 0;
}

.seccion__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    color: var(--turquesa);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.seccion__etiqueta::before {
    content: "";
    width: 3.2rem;
    height: 0.2rem;
    border-radius: 999px;
    background-color: var(--turquesa);
}

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 5.4rem;
    padding: 1.5rem 2.4rem;
    border: 0.1rem solid transparent;
    border-radius: 999px;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.boton:hover {
    transform: translateY(-0.2rem);
}

.boton--primario {
    background-color: var(--turquesa);
    color: var(--azul-fondo);
    box-shadow: 0 1.6rem 3rem rgba(76, 230, 212, 0.18);
}

.boton--primario:hover {
    background-color: var(--blanco);
    box-shadow: 0 1.6rem 3.5rem rgba(250, 251, 253, 0.16);
}

.boton--secundario {
    border-color: rgba(76, 230, 212, 0.38);
    color: var(--blanco);
    background-color: rgba(255, 255, 255, 0.03);
}

.boton--secundario:hover {
    border-color: var(--turquesa);
    color: var(--turquesa);
    background-color: rgba(76, 230, 212, 0.08);
}

/* Header */

.header {
    position: relative;
    overflow: hidden;
    min-height: 100svh;
    padding-bottom: 6rem;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.4rem 0;
}

.nav__marca {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    font-weight: 800;
}

.nav__marca-icono {
    display: inline-grid;
    place-items: center;
    width: 4.6rem;
    height: 4.6rem;
    border: 0.1rem solid rgba(76, 230, 212, 0.45);
    border-radius: 1.3rem;
    color: var(--azul-fondo);
    background-color: var(--turquesa);
    box-shadow: 0 1rem 2.8rem rgba(76, 230, 212, 0.2);
}

.nav__marca-texto {
    color: var(--blanco);
    font-size: 1.8rem;
}

.nav__enlaces {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.6rem;
    border: 0.1rem solid var(--borde);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(1.2rem);
}

.nav__enlaces a {
    padding: 1rem 1.5rem;
    border-radius: 999px;
    color: var(--gris);
    font-size: 1.5rem;
    font-weight: 700;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.nav__enlaces a:hover {
    color: var(--azul-fondo);
    background-color: var(--turquesa);
}

.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5rem;
    align-items: center;
    padding-top: 5rem;
}

.hero__contenido {
    max-width: 72rem;
}

.hero__etiqueta {
    display: inline-flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 0.8rem 1.4rem;
    border: 0.1rem solid rgba(76, 230, 212, 0.28);
    border-radius: 999px;
    color: var(--turquesa);
    background-color: var(--turquesa-suave);
    font-weight: 800;
}

.hero__texto {
    max-width: 62rem;
    margin-bottom: 3rem;
    font-size: clamp(1.8rem, 2vw, 2.2rem);
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-bottom: 4rem;
}

.hero__datos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
}

.hero__datos article {
    padding: 1.8rem;
    border: 0.1rem solid var(--borde);
    border-radius: var(--radio-sm);
    background-color: rgba(255, 255, 255, 0.04);
}

.hero__datos strong {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--turquesa);
    font-size: 3rem;
    line-height: 1;
}

.hero__datos span {
    color: var(--gris);
    font-weight: 600;
}

.hero__media {
    position: relative;
}

.hero__media::before {
    content: "";
    position: absolute;
    inset: 6%;
    filter: blur(3rem);
}

.hero__video {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 34rem;
    padding: 3rem;
    
    overflow: hidden;
}



.hero__video video {
    position: relative;
    z-index: 1;
    width: min(100%, 36rem);
    border-radius: 2rem;
}

/* Intro y servicios */

.intro {
    position: relative;
}

.intro__texto {
    max-width: 84rem;
    margin-bottom: 4rem;
    font-size: 1.9rem;
}

.servicios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.servicio {
    position: relative;
    overflow: hidden;
    min-height: 29rem;
    padding: 2.6rem;
    border: 0.1rem solid var(--borde);
    border-radius: var(--radio);
    background:
        linear-gradient(145deg, rgba(76, 230, 212, 0.1), transparent 44%),
        var(--azul-panel);
    box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.18);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

.servicio:hover {
    transform: translateY(-0.5rem);
    border-color: rgba(76, 230, 212, 0.5);
}

.servicio__icono {
    display: inline-grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: 2.2rem;
    border-radius: 1.4rem;
    color: var(--azul-fondo);
    background-color: var(--turquesa);
    font-weight: 900;
}

.servicio h3 {
    margin-bottom: 1.8rem;
    color: var(--blanco);
}

.servicio li {
    position: relative;
    padding-left: 2.2rem;
    color: var(--gris);
    font-weight: 700;
}

.servicio li + li {
    margin-top: 1rem;
}

.servicio li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: var(--turquesa);
}

/* Proceso */

.proceso {
    background:
        linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.03), transparent);
}

.proceso__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: start;
}

.proceso__texto {
    max-width: 58rem;
    font-size: 1.9rem;
}

.pasos {
    display: grid;
    gap: 1.4rem;
}

.paso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.6rem;
    padding: 2rem;
    border: 0.1rem solid var(--borde);
    border-radius: var(--radio-sm);
    background-color: rgba(255, 255, 255, 0.045);
}

.paso span {
    display: inline-grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    color: var(--turquesa);
    background-color: rgba(76, 230, 212, 0.12);
    font-weight: 900;
}

.paso h3 {
    margin-bottom: 0.6rem;
    font-size: 2rem;
}

.paso p {
    margin-bottom: 0;
}

/* Galería */

.galeria {
    overflow: hidden;
}

.galeria__encabezado {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.galeria__encabezado p:last-child {
    max-width: 56rem;
    font-size: 1.8rem;
}

.galeria__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
}

.galeria__item {
    position: relative;
    overflow: hidden;
    min-height: 24rem;
    margin: 0;
    border: 0.1rem solid var(--borde);
    border-radius: 2rem;
    background-color: var(--azul-panel);
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.2);
}

.galeria__item img,
.galeria__item picture {
    width: 100%;
    height: 100%;
}

.galeria__item img {
    object-fit: cover;
    transform: scale(1.02);
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.galeria__item::after {
    content: "";
    position: absolute;
    inset: 0;
    
    transition: opacity 0.3s ease;
}

.galeria__item:hover img {
    transform: scale(1.08);
}

.galeria__item:hover::after {
    opacity: 1;
}

/* Contacto */

.contacto {
    padding-bottom: 9rem;
}

.contacto__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    align-items: stretch;
}

.contacto__contenido,
.contacto__tarjeta {
    border: 0.1rem solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.contacto__contenido {
    padding: clamp(3rem, 5vw, 5rem);
    background:
        linear-gradient(145deg, rgba(76, 230, 212, 0.11), transparent 46%),
        var(--azul-panel);
}

.contacto__contenido p {
    max-width: 62rem;
    font-size: 1.9rem;
}

.contacto__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 3rem;
}

.contacto__tarjeta {
    padding: 3rem;
    background-color: rgba(255, 255, 255, 0.045);
}

.contacto__tarjeta h3 {
    margin-bottom: 2rem;
    color: var(--turquesa);
}

.contacto__tarjeta li {
    position: relative;
    padding-left: 2.4rem;
    color: var(--gris);
    font-weight: 700;
}

.contacto__tarjeta li + li {
    margin-top: 1.2rem;
}

.contacto__tarjeta li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--turquesa);
    font-weight: 900;
}

.contacto__tarjeta p {
    margin-top: 2.4rem;
    margin-bottom: 0;
}

/* Footer */

.footer {
    padding: 3rem 0;
    border-top: 0.1rem solid var(--borde);
    background-color: rgba(0, 0, 0, 0.18);
}

.footer__contenido {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
}

.footer__contenido p {
    margin-bottom: 0;
}

.footer__contenido p:first-child {
    color: var(--turquesa);
    font-weight: 900;
}

/* Responsive */

@media (min-width: 560px) {
    .hero__datos {
        grid-template-columns: repeat(3, 1fr);
    }

    .galeria__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .galeria__item--grande {
        grid-column: span 2;
    }
}

@media (min-width: 768px) {
    .seccion {
        padding: 10rem 0;
    }

    .hero {
        grid-template-columns: 1.05fr 0.95fr;
        padding-top: 7rem;
    }

    .servicios {
        grid-template-columns: repeat(3, 1fr);
    }

    .proceso__grid {
        grid-template-columns: 0.9fr 1.1fr;
    }

    .galeria__encabezado {
        grid-template-columns: 1fr auto;
        align-items: end;
    }

    .galeria__grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 24rem;
    }

    .galeria__item {
        min-height: auto;
    }

    .galeria__item--grande {
        grid-column: span 2;
        grid-row: span 2;
    }

    .galeria__item--vertical {
        grid-row: span 2;
    }

    .contacto__grid {
        grid-template-columns: 1.35fr 0.65fr;
    }

    .footer__contenido {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
}

@media (max-width: 767px) {
    .nav {
        flex-direction: column;
        align-items: stretch;
    }

    .nav__marca {
        justify-content: center;
    }

    .nav__enlaces {
        width: 100%;
        justify-content: space-between;
        overflow-x: auto;
    }

    .nav__enlaces a {
        white-space: nowrap;
        font-size: 1.4rem;
    }

    .hero {
        text-align: center;
    }

    .hero__contenido,
    .hero__texto {
        margin-right: auto;
        margin-left: auto;
    }

    .hero__acciones {
        justify-content: center;
    }

    .hero__video {
        min-height: 28rem;
    }

    .seccion__etiqueta {
        justify-content: center;
    }

    .intro,
    .proceso,
    .galeria,
    .contacto {
        text-align: center;
    }

    .servicio,
    .paso,
    .contacto__tarjeta {
        text-align: left;
    }

    .contacto__acciones {
        justify-content: center;
    }

    .boton {
        width: 100%;
    }
}

@media (max-width: 420px) {
    h1 {
        font-size: 3.7rem;
    }

    .nav__enlaces {
        padding: 0.5rem;
    }

    .nav__enlaces a {
        padding: 0.9rem 1rem;
    }

    .hero__video {
        min-height: 24rem;
        padding: 2rem;
    }

    .servicio,
    .contacto__contenido,
    .contacto__tarjeta {
        padding: 2.2rem;
    }
}