/* =========================================================
   01. FUENTES
   ========================================================= */

@font-face {
    font-family: "Montserrat";
    src: url("../assets/fonts/montserrat/Montserrat-ExtraBold.woff")
        format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   02. VARIABLES
   ========================================================= */

:root {
    /* Colores corporativos */
    --color-amarillo: #eab308;
    --color-youtube: #ff0000;
    --color-wallapop: #13c1ac;

    /* Negros */
    --color-negro: #050505;
    --color-negro-puro: #000000;
    --color-negro-suave: #111111;

    /* Blancos */
    --color-blanco: #ffffff;
    --color-blanco-suave: #f2f2f2;

    /* Grises */
    --color-gris-claro: #c9c9c9;
    --color-gris: #8d8d8d;
    --color-gris-oscuro: #555555;

    /* Bordes */
    --borde-claro: rgba(255, 255, 255, 0.25);
    --borde-muy-claro: rgba(255, 255, 255, 0.12);

    /* Tipografías */
    --fuente-general: Arial, Helvetica, sans-serif;
    --fuente-titulos: "Montserrat", Arial, Helvetica, sans-serif;

    /* Estructura */
    --ancho-maximo: 1440px;
    --padding-lateral: clamp(24px, 5vw, 80px);
    --altura-header: 100px;

    /* Transiciones */
    --transicion-rapida: 0.2s ease;
    --transicion-normal: 0.35s ease;
}


/* =========================================================
   03. RESET BÁSICO
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--color-negro);
    color: var(--color-blanco);
    font-family: var(--fuente-general);
}

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

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

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


/* =========================================================
   04. ESTILOS GENERALES
   ========================================================= */

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

p {
    line-height: 1.6;
}

.contenedor {
    width: min(
        calc(100% - (var(--padding-lateral) * 2)),
        var(--ancho-maximo)
    );
    margin-inline: auto;
}


/* =========================================================
   05. BOTONES
   ========================================================= */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 0 30px;

    border: 1px solid transparent;
    border-radius: 4px;

    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;

    cursor: pointer;

    transition:
        transform var(--transicion-rapida),
        background-color var(--transicion-normal),
        color var(--transicion-normal),
        border-color var(--transicion-normal);
}

.boton:hover {
    transform: translateY(-2px);
}


/* Botón amarillo */

.boton--principal {
    background-color: var(--color-amarillo);
    color: var(--color-negro);
}

.boton--principal:hover {
    background-color: var(--color-blanco);
    color: var(--color-negro);
}


/* Botones secundarios */

.boton--youtube,
.boton--wallapop{

    background-color: rgba(0,0,0,.15);
    color: var(--color-blanco);
    border:1px solid var(--borde-claro);
    backdrop-filter: blur(5px);

}

.boton--youtube:hover{

    background-color: var(--color-youtube);
    border-color: var(--color-youtube);
    color: var(--color-blanco);

}

.boton--wallapop:hover{

    background-color: var(--color-wallapop);
    border-color: var(--color-wallapop);
    color: var(--color-blanco);

}

/* =========================================================
   06. HEADER
   ========================================================= */

.header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;

    width: 100%;
    height: var(--altura-header);

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.3) 55%,
            transparent 100%
        );
}

.header__contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: min(
        calc(100% - (var(--padding-lateral) * 2)),
        var(--ancho-maximo)
    );

    height: 100%;
    margin-inline: auto;
}


/* Logo */

.header__logo {
    display: block;
    width: clamp(190px, 18vw, 290px);
    flex-shrink: 0;
}

.header__logo-imagen {
    width: 100%;
    height: auto;
}


/* Navegación */

.header__navegacion {
    margin-left: auto;
}

.header__lista {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

.header__elemento {
    display: block;
}

.header__enlace {
    position: relative;
    display: block;

    padding-block: 10px;

    color: var(--color-blanco);

    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition: color var(--transicion-normal);
}

.header__enlace::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;

    height: 2px;

    background-color: var(--color-amarillo);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform var(--transicion-normal);
}

.header__enlace:hover {
    color: var(--color-amarillo);
}

.header__enlace:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* =========================================================
   07. HERO
   ========================================================= */

.hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    background-color: var(--color-negro);
}


/* Vídeo de fondo */

.hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        brightness(0.72)
        contrast(1.05)
        saturate(0.88);

    transform: scale(1.015);
}


/* Capa oscura */

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.97) 0%,
            rgba(0, 0, 0, 0.91) 22%,
            rgba(0, 0, 0, 0.74) 48%,
            rgba(0, 0, 0, 0.42) 76%,
            rgba(0, 0, 0, 0.55) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.25) 42%,
            rgba(0, 0, 0, 0.3) 100%
        );
}


/* Contenedor */

.hero__contenedor {
    position: relative;
    z-index: 2;

    width: min(
        calc(100% - (var(--padding-lateral) * 2)),
        var(--ancho-maximo)
    );

    margin-inline: auto;
    padding-top: var(--altura-header);
}

.hero__contenido {
    max-width: 850px;
}

/* =========================================================
   ULTRAPANORÁMICOS (21:9 y superiores)
   ========================================================= */

@media (min-width: 1800px) {

    .header__contenedor,
    .hero__contenedor {

        width: 100%;
        max-width: none;

        margin-inline: 0;

        padding-left: clamp(72px, 5vw, 180px);
        padding-right: clamp(72px, 5vw, 180px);
    }

}


/* Etiqueta superior */

.hero__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 24px;

    color: var(--color-amarillo);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero__etiqueta::before {
    content: "";

    width: 38px;
    height: 2px;

    background-color: var(--color-amarillo);
}


/* Título */

.hero__titulo {
    max-width: 850px;
    margin-bottom: 28px;

    font-family: var(--fuente-titulos);
    font-size: clamp(3rem, 6.4vw, 7rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.055em;

    text-wrap: balance;
}

.hero__titulo-destacado {
    display: inline;
    color: var(--color-amarillo);
}


/* Descripción */

.hero__descripcion {
    max-width: 620px;
    margin-bottom: 38px;

    color: var(--color-blanco-suave);

    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.65;

    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}


/* Acciones */

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}


/* Indicador inferior */

.hero__scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    color: var(--color-gris-claro);

    transform: translateX(-50%);
}

.hero__scroll-texto {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero__scroll-linea {
    width: 1px;
    height: 42px;

    overflow: hidden;

    background-color: rgba(255, 255, 255, 0.3);
}

.hero__scroll-linea::after {
    content: "";

    display: block;

    width: 100%;
    height: 50%;

    background-color: var(--color-amarillo);

    animation: scroll-linea 1.8s ease-in-out infinite;
}


/* =========================================================
   08. SECCIONES TEMPORALES
   ========================================================= */

.seccion-temporal {
    min-height: 1px;
    background-color: var(--color-negro);
}


/* =========================================================
   09. ANIMACIONES
   ========================================================= */

@keyframes scroll-linea {
    0% {
        transform: translateY(-100%);
    }

    50%,
    100% {
        transform: translateY(200%);
    }
}


/* =========================================================
   10. RESPONSIVE: TABLET
   ========================================================= */

@media (max-width: 900px) {
    :root {
        --altura-header: 82px;
    }

    .header__lista {
        gap: 20px;
    }

    .header__enlace {
        font-size: 0.75rem;
    }

    .hero__contenido {
        max-width: 680px;
    }

    .hero__titulo {
        max-width: 680px;
    }

    .hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.95) 0%,
                rgba(0, 0, 0, 0.84) 50%,
                rgba(0, 0, 0, 0.55) 100%
            ),
            linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.2) 60%,
                rgba(0, 0, 0, 0.35) 100%
            );
    }
}


/* =========================================================
   11. RESPONSIVE: MÓVIL
   ========================================================= */

@media (max-width: 700px) {
    .header__navegacion {
        display: none;
    }

    .header__logo {
        width: 210px;
    }

    .hero {
        align-items: flex-end;
    }

    .hero__video {
        object-position: 58% center;

        filter:
            brightness(0.6)
            contrast(1.05)
            saturate(0.8);
    }

    .hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.98) 0%,
                rgba(0, 0, 0, 0.9) 38%,
                rgba(0, 0, 0, 0.55) 70%,
                rgba(0, 0, 0, 0.45) 100%
            );
    }

    .hero__contenedor {
        padding-top: calc(var(--altura-header) + 80px);
        padding-bottom: 105px;
    }

    .hero__titulo {
        font-size: clamp(2.7rem, 13vw, 4.5rem);
        line-height: 0.98;
    }

    .hero__descripcion {
        font-size: 1rem;
    }

    .hero__acciones {
        flex-direction: column;
        align-items: stretch;
    }

    .boton {
        width: 100%;
    }

    .hero__scroll {
        display: none;
    }
}


/* =========================================================
   12. RESPONSIVE: MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {
    :root {
        --padding-lateral: 20px;
    }

    .header__logo {
        width: 185px;
    }

    .hero__etiqueta {
        font-size: 0.66rem;
        letter-spacing: 0.14em;
    }

    .hero__etiqueta::before {
        width: 28px;
    }

    .hero__titulo {
        margin-bottom: 22px;
    }
}


/* =========================================================
   13. ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero__video {
        display: none;
    }
}