:root {
    --black: #0B0B0D;
    --ruby: #C21835;
    --gold: #D4AF37;
    --white: #F5F0E9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
}

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

header {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 6%;
    border-bottom: 1px solid rgba(212,175,55,.25);
}

.logo {
    color: var(--gold);
    font-size: 28px;
    letter-spacing: 5px;
    font-family: Georgia, serif;
}

nav {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 13px;
    letter-spacing: 1px;
}

nav a:hover { color: var(--gold); }

.language {
    border: 1px solid var(--gold);
    padding: 8px 12px;
    color: var(--gold);
}

.hero {
    min-height: 76vh;
    display: flex;
    align-items: center;
    padding: 8% 10%;
    background:
        radial-gradient(ellipse at 80% 45%, #45101f 0%, transparent 50%),
        linear-gradient(135deg, #171015, #0B0B0D 75%);
}

.hero-content { max-width: 650px; }

.eyebrow {
    color: var(--gold);
    letter-spacing: 5px;
    font-size: 12px;
    text-transform: uppercase;
}

h1 {
    font-family: Georgia, serif;
    font-size: clamp(65px, 12vw, 150px);
    font-weight: normal;
    letter-spacing: 8px;
    margin: 15px 0;
    line-height: 1;
}

.hero p {
    color: #ddd;
    font-size: 19px;
    line-height: 1.7;
}

.button {
    display: inline-block;
    background: var(--ruby);
    color: white;
    padding: 16px 30px;
    margin-top: 25px;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
}

.button:hover { background: #9f1029; }

section.content {
    padding: 85px 8%;
    text-align: center;
}

section.content h2 {
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: 38px;
    font-weight: normal;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 45px;
}

.card {
    border: 1px solid rgba(212,175,55,.25);
    padding: 50px 25px;
    background: #141215;
}

.card h3 { color: var(--gold); }

.card p { color: #bbb; line-height: 1.7; }

footer {
    padding: 30px;
    text-align: center;
    border-top: 1px solid #333;
    color: #888;
    font-size: 12px;
}

@media (max-width: 850px) {
    header { flex-direction: column; gap: 22px; }
    nav { flex-wrap: wrap; justify-content: center; gap: 15px; }
    .hero { min-height: 65vh; padding: 70px 7%; }
    .cards { grid-template-columns: 1fr; }
    section.content { padding: 60px 6%; }
}


/* HERO FOTOGRAFICO LORENA */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    background-image:
        linear-gradient(
            90deg,
            rgba(11,11,13,0.78) 0%,
            rgba(11,11,13,0.35) 48%,
            rgba(11,11,13,0.05) 100%
        ),
        url('/assets/images/lorena-desktop.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-content {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .hero {
        min-height: 85vh;
        min-height: 85svh;
        align-items: flex-start;
        padding-top: 80px;
        background-image:
            linear-gradient(
                180deg,
                rgba(11,11,13,0.70) 0%,
                rgba(11,11,13,0.12) 55%,
                rgba(11,11,13,0.35) 100%
            ),
            url('/assets/images/lorena-mobile.jpg');
        background-position: center top;
    }
}