/* =========================================
   APHAREL - BASE
========================================= */


/* 🔴 CAMBIO
   Carga real de Bebas Neue Regular.

   Archivo:
   assets/fonts/BebasNeue-Regular.ttf
*/

@font-face {

    font-family: "Bebas Neue Cyrillic";

    src: url("../fonts/BebasNeue-Regular.ttf")
        format("truetype");

    font-weight: 400;

    font-style: normal;

    font-display: swap;
}


/* 🔴 CAMBIO
   Carga real de Bebas Neue Bold.

   Archivo:
   assets/fonts/BebasNeue-Bold.ttf

   Esta versión será utilizada para que los títulos
   tengan un grosor parecido al logo de Apharel.
*/

@font-face {

    font-family: "Bebas Neue Cyrillic";

    src: url("../fonts/BebasNeue-Bold.ttf")
        format("truetype");

    font-weight: 700;

    font-style: normal;

    font-display: swap;
}


:root {
    --apharel-black: #111111;
    --apharel-white: #ffffff;
    --apharel-gray: #f5f5f5;
    --apharel-text: #222222;
    --apharel-muted: #777777;

    /* FUENTES */

    --apharel-font-body: Arial, Helvetica, sans-serif;

    /* 🔴 CAMBIO
       Bebas Neue Cyrillic se utilizará para títulos.
    */

    --apharel-font-title: "Bebas Neue Cyrillic", sans-serif;
}


/* =========================================
   BASE GENERAL
========================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    color: var(--apharel-text);
    background: var(--apharel-white);

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


/* =========================================
   TÍTULOS APHAREL
========================================= */

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

    /* 🔴 CAMBIO
       Los títulos utilizan Bebas Neue.

       El peso 700 utiliza el archivo
       BebasNeue-Bold.ttf.
    */

    font-family: var(--apharel-font-title);

    font-weight: 700;
}


/* =========================================
   ENLACES
========================================= */

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


/* =========================================
   IMÁGENES
========================================= */

img {
    max-width: 100%;
    height: auto;
}


/* =========================================
   APHAREL - HOME
   HERO PRINCIPAL
========================================= */

.apharel-home {
    width: 100%;
}

.apharel-hero {
    min-height: 720px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 80px 8%;

    background: #f5f5f2;

    overflow: hidden;

    position: relative;
}

.apharel-hero-content {
    width: 50%;

    position: relative;

    z-index: 2;
}


/* =========================================
   HERO — TEXTO PEQUEÑO
========================================= */

.apharel-hero-eyebrow {
    margin: 0 0 20px;

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

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 3px;

    color: #777;
}


/* =========================================
   HERO — TÍTULO
========================================= */

.apharel-hero h1 {
    margin: 0;

    /* 🔴 CAMBIO
       Utiliza la versión Bold real de
       Bebas Neue Cyrillic.
    */

    font-family: var(--apharel-font-title);

    font-size: clamp(65px, 8vw, 115px);

    line-height: 0.9;

    /* 🔴 CAMBIO
       700 = BebasNeue-Bold.ttf
    */

    font-weight: 700;

    /* 🔴 CAMBIO
       Espaciado ligeramente positivo para
       mantener las letras separadas.
    */

    letter-spacing: 2px;

    color: #111;
}


.apharel-hero h1 span {

    /* 🔴 CAMBIO
       Mantiene la versión Bold del título.
    */

    font-family: var(--apharel-font-title);

    font-style: normal;

    font-weight: 700;

    letter-spacing: 2px;

    color: #111;
}


/* =========================================
   HERO — DESCRIPCIÓN
========================================= */

.apharel-hero-text {
    max-width: 430px;

    margin: 30px 0;

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

    font-size: 17px;

    line-height: 1.6;

    color: #555;
}


/* =========================================
   HERO — BOTONES
========================================= */

.apharel-hero-buttons {
    display: flex;

    gap: 12px;

    align-items: center;
}

.apharel-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 0 28px;

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

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.apharel-btn-primary {
    background: #111;

    color: #fff;
}

.apharel-btn-primary:hover {
    background: #333;

    color: #fff;
}

.apharel-btn-secondary {
    border: 1px solid #111;

    color: #111;

    background: transparent;
}

.apharel-btn-secondary:hover {
    background: #111;

    color: #fff;
}


/* =========================================
   HERO — VISUAL
========================================= */

.apharel-hero-visual {
    width: 45%;

    height: 600px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}

.apharel-hero-circle {
    width: 520px;
    height: 520px;

    border-radius: 50%;

    background: #deded8;

    position: absolute;
}

.apharel-hero-placeholder {
    width: 330px;
    height: 500px;

    background: #111;

    position: relative;

    z-index: 1;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding-bottom: 35px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.15);
}

.apharel-hero-placeholder span {
    font-family: var(--apharel-font-body);

    color: #fff;

    font-size: 18px;

    letter-spacing: 8px;

    font-weight: 500;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .apharel-hero {
        min-height: auto;

        flex-direction: column;

        padding: 70px 6%;

        text-align: center;
    }

    .apharel-hero-content {
        width: 100%;
    }

    .apharel-hero h1 {
        font-size: clamp(60px, 14vw, 90px);

        /* 🔴 CAMBIO
           Mantiene el grosor Bold en tablet.
        */

        font-weight: 700;

        letter-spacing: 1.8px;
    }

    .apharel-hero h1 span {

        font-weight: 700;

        letter-spacing: 1.8px;
    }

    .apharel-hero-text {
        margin-left: auto;

        margin-right: auto;
    }

    .apharel-hero-buttons {
        justify-content: center;
    }

    .apharel-hero-visual {
        width: 100%;

        height: 500px;

        margin-top: 40px;
    }

    .apharel-hero-circle {
        width: 400px;
        height: 400px;
    }

    .apharel-hero-placeholder {
        width: 270px;
        height: 420px;
    }
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 500px) {

    .apharel-hero {
        padding: 55px 20px;
    }

    .apharel-hero h1 {

        /* 🔴 CAMBIO
           Bebas Neue Bold también en móvil.
        */

        font-weight: 700;

        letter-spacing: 1.5px;

        font-size: 58px;
    }

    .apharel-hero h1 span {

        font-weight: 700;

        letter-spacing: 1.5px;
    }

    .apharel-hero-buttons {
        flex-direction: column;

        width: 100%;
    }

    .apharel-btn {
        width: 100%;
    }

    .apharel-hero-visual {
        height: 420px;
    }

    .apharel-hero-circle {
        width: 310px;
        height: 310px;
    }

    .apharel-hero-placeholder {
        width: 220px;
        height: 350px;
    }
}