/* =====================================================================
   ARKLOS · SISTEMA DE DISEÑO
   Negro · Blanco · Amarillo corporativo #f0be15
   ===================================================================== */

:root {
    --ark-black:      #0b0b0d;
    --ark-ink:        #17171a;
    --ark-graphite:   #44454a;
    --ark-mute:       #74757a;
    --ark-line:       #e8e5dc;
    --ark-paper:      #f8f5ec;
    --ark-soft:       #fffaf0;
    --ark-white:      #ffffff;
    --ark-gold:       #f0be15;
    --ark-gold-2:     #ffd84f;
    --ark-gold-deep:  #b98900;
    --ark-gold-wash:  #fff3bf;

    --ark-display: "DM Serif Display", Georgia, "Times New Roman", serif;
    --ark-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
    --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
    --step-1:  clamp(1.18rem, 1.08rem + 0.45vw, 1.42rem);
    --step-2:  clamp(1.55rem, 1.34rem + 0.92vw, 2.05rem);
    --step-3:  clamp(2.1rem, 1.62rem + 2.05vw, 3.25rem);
    --step-4:  clamp(2.85rem, 2rem + 3.85vw, 5.35rem);

    --ark-wrap: 1200px;
    --ark-gutter: clamp(1.1rem, 4vw, 2.6rem);
    --ark-radius: 22px;
    --ark-radius-sm: 14px;
    --ark-shadow: 0 28px 80px -45px rgba(8,8,10,0.55);
    --ark-shadow-strong: 0 34px 110px -50px rgba(8,8,10,0.7);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--ark-sans);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--ark-ink);
    background: var(--ark-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--ark-display);
    font-weight: 400;
    line-height: .98;
    color: var(--ark-black);
    margin: 0 0 0.48em;
    letter-spacing: -0.03em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 1.1rem; }
a { color: inherit; text-decoration-color: var(--ark-gold); text-underline-offset: 3px; }
a:hover { color: var(--ark-gold-deep); }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(var(--ark-wrap), 100% - var(--ark-gutter) * 2); margin-inline: auto; }

.eyebrow {
    font-family: var(--ark-sans);
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ark-gold-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1rem;
}
.eyebrow::before {
    content: "";
    width: 2rem;
    height: 3px;
    border-radius: 999px;
    background: var(--ark-gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--ark-sans);
    font-size: var(--step-0);
    font-weight: 800;
    line-height: 1;
    min-height: 48px;
    padding: 1rem 1.45rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--ark-gold); border-color: var(--ark-gold); color: var(--ark-black); box-shadow: 0 14px 34px -22px rgba(240,190,21,.9); }
.btn--gold:hover { background: var(--ark-black); border-color: var(--ark-black); color: var(--ark-white); }
.btn--dark, .btn--primary { background: var(--ark-black); border-color: var(--ark-black); color: var(--ark-white); }
.btn--dark:hover, .btn--primary:hover { background: var(--ark-gold); border-color: var(--ark-gold); color: var(--ark-black); }
.btn--light { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); color: var(--ark-white); }
.btn--light:hover { background: var(--ark-white); border-color: var(--ark-white); color: var(--ark-black); }
.btn--ghost { background: transparent; border-color: var(--ark-black); color: var(--ark-black); }
.btn--ghost:hover { background: var(--ark-black); color: var(--ark-white); }
.btn--sm { min-height: 42px; padding: .8rem 1.1rem; font-size: var(--step--1); }
.text-link { font-weight: 900; text-decoration: none; color: var(--ark-black); }
.text-link:hover { color: var(--ark-gold-deep); }

:focus-visible { outline: 3px solid var(--ark-gold); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ark-black); color: #fff; padding: .75rem 1rem; z-index: 999; }
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}