:root {
    --bg: #fbfbfb;
    --card: #ffffff;
    --muted: #6b6b6b;
    --accent: #e37b2f;
    /* naranja similar */
    --shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: #111
}

.page {
    max-width: 1200px;
    margin: 28px auto;
    padding: 28px;
    background: transparent
}

.site-header {
    background: transparent;
    padding: 12px 0
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo {
    font-weight: 800;
    font-size: 28px
}

.main-nav {
    display: flex;
    gap: 22px;
    align-items: center
}

.main-nav a {
    color: #111;
    text-decoration: none;
    font-weight: 500
}

.hamburger {
    display: none;
    border: 0;
    background: none;
    font-size: 20px
}


.hero {
    margin-top: 18px
}

.hero-inner {
    display: flex;
    gap: 40px;
    align-items: center
}

.hero-text {
    flex: 1
}

.eyebrow {
    color: var(--accent);
    margin: 0 0 12px 0;
    font-weight: 600
}

h1 {
    font-size: 72px;
    line-height: 0.95;
    margin: 0 0 18px 0
}

.lead {
    color: var(--muted);
    font-size: 18px;
    margin: 0 0 24px 0
}

.cta {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 10px;
    background: var(--accent);
    color: white;
    text-decoration: none;
    font-weight: 700
}


.hero-image {
    width: 380px;
    flex: 0 0 380px
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    object-fit: cover;
    box-shadow: var(--shadow)
}


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

.card {
    background: var(--card);
    padding: 22px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    min-height: 140px
}

.card-icon {
    font-size: 22px;
    background: transparent
}

.card h3 {
    margin: 10px 0;
    font-size: 18px
}

.card ul {
    margin: 8px 0 0 18px;
    color: var(--muted)
}


.site-footer {
    margin-top: 40px;
    text-align: center;
    color: var(--muted);
    font-size: 14px
}


/* responsive */
@media (max-width:1000px) {
    h1 {
        font-size: 48px
    }

    .hero-inner {
        flex-direction: column-reverse;
        /* Put image on top or text on top? usually text on top is better for SEO but image first is nice visually. Let's stick to standard column which puts text first if DOM order is text first. The DOM is text then image. Flex-direction column puts text first. */
        text-align: center;
    }

    .hero-image {
        width: 100%;
        max-width: 520px;
        margin-bottom: 30px;
        /* Space between text and image if reversed, or just generally */
    }

    .hero-text {
        padding: 0 20px;
    }
}

@media (max-width:700px) {
    .site-header {
        position: relative;
        /* Context for absolute nav */
    }

    .main-nav {
        /* Reset for mobile if needed, but flex is fine */
    }

    .main-nav a {
        display: none;
    }

    .hamburger {
        display: block;
        /* Make sure it's block/inline-block */
        cursor: pointer;
    }

    /* State when menu is open */
    .main-nav.open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        /* Make sure it has background */
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        gap: 15px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        border-radius: 0 0 16px 16px;
    }

    .main-nav.open a {
        display: block;
        font-size: 18px;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 36px;
        /* Slightly smaller for mobile */
    }

    .lead {
        font-size: 16px;
    }
}