/* =====================================================
   EAGLETRANSPORT
   Base CSS
===================================================== */


/* =====================================================
   RESET
===================================================== */

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


html {
    scroll-behavior: smooth;
}


html,
body {
    margin: 0;
    padding: 0;
}


body {

    min-height: 100vh;

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

    color: var(--color-white);

    font-family: var(--font-body);

    font-size: 16px;

    line-height: 1.6;

    font-weight: 400;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


/* =====================================================
   ELEMENTOS GENERALES
===================================================== */

img,
picture,
video,
canvas,
svg {

    display: block;

    max-width: 100%;

}


img {

    width: 100%;

    height: auto;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


a {

    color: inherit;

    text-decoration: none;

}


ul,
ol {

    margin: 0;

    padding: 0;

    list-style: none;

}


p {

    margin-top: 0;

    margin-bottom: 1rem;

    color: var(--color-gray);

}


h1,
h2,
h3,
h4,
h5,
h6 {

    margin: 0;

    font-family: var(--font-heading);

    color: var(--color-white);

    font-weight: 700;

    line-height: 0.95;

    text-transform: uppercase;

}


/* =====================================================
   SELECCIÓN DE TEXTO
===================================================== */

::selection {

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

    color: var(--color-black);

}


/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar {

    width: 9px;

}


::-webkit-scrollbar-track {

    background: var(--color-black);

}


::-webkit-scrollbar-thumb {

    background: var(--color-dark-border);

    border-radius: 20px;

}


::-webkit-scrollbar-thumb:hover {

    background: var(--color-gold);

}


/* =====================================================
   CONTENEDOR
===================================================== */

.container {

    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;

}


/* =====================================================
   SECCIONES
===================================================== */

.section {

    position: relative;

    width: 100%;

    padding-block: var(--section-space);

}


.section-dark {

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

}


/* Fixed header offset for anchor navigation */
section[id] {

    scroll-margin-top: 75px;

}


/* =====================================================
   HEADINGS DE SECCIÓN
===================================================== */

.section-heading {

    max-width: 850px;

}


.section-heading h2 {

    max-width: 800px;

    margin-top: 18px;

    font-size: clamp(
        3rem,
        6vw,
        5.5rem
    );

    letter-spacing: -0.015em;

}


.section-heading h2 span {

    color: var(--color-gold);

}


.section-heading p {

    max-width: 620px;

    margin-top: 28px;

    font-size: 1.05rem;

    line-height: 1.8;

}


/* =====================================================
   ETIQUETA DE SECCIÓN
===================================================== */

.section-tag {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--color-gold);

    font-family: var(--font-body);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;

}


.section-tag::before {

    content: "";

    width: 34px;

    height: 2px;

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

}


/* =====================================================
   HERO - BASE
===================================================== */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: 150px;

    background:

        radial-gradient(
            circle at 70% 35%,
            rgba(201, 154, 36, 0.07),
            transparent 30%
        ),

        var(--color-black);

}


.hero-content {

    max-width: 900px;

}


.hero h1 {

    margin-top: 26px;

    max-width: 1000px;

    font-size: clamp(
        4rem,
        8.5vw,
        8rem
    );

    letter-spacing: -0.02em;

}


.hero h1 span {

    display: block;
    font-weight: 700;
    color: var(--color-gold);

}


.hero p {

    max-width: 600px;

    margin-top: 30px;

    font-size: clamp(
        1rem,
        1.4vw,
        1.15rem
    );

    line-height: 1.8;

}


/* =====================================================
   FOOTER BASE
===================================================== */

.site-footer {

    padding-block: 70px;

    background-color: #020202;

    border-top: 1px solid var(--color-dark-border);

}


.footer-inner {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.footer-inner p {

    margin: 0;

}


/* =====================================================
   MARCA TEMPORAL
===================================================== */

/*
   Por ahora usamos texto como logo.

   Cuando tengamos el logo PNG/SVG transparente,
   reemplazaremos esto por la imagen oficial.
*/

.brand {

    display: inline-flex;

    align-items: center;

    font-family: var(--font-heading);

    font-size: 1.55rem;

    font-weight: 800;

    letter-spacing: 0.03em;

}


.brand-eagle {

    color: var(--color-white);

}


.brand-transport {

    color: var(--color-gold);

}


.footer-brand {

    display: inline-flex;

    font-family: var(--font-heading);

    font-size: 2rem;

    font-weight: 800;

}

/* =====================================================
   SECTION DIVIDERS
===================================================== */

.section-divider {

    position: relative;

}


.section-divider::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.09),
            transparent
        );

}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}


button,
a {
    touch-action: manipulation;
}

:focus-visible {

    outline: 2px solid var(--color-gold);

    outline-offset: 4px;

}