@font-face {
    font-family: "Basis Market";
    src: url("../fuentes/BasisGrotesque-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "League Spartan Market";
    src: url("../fuentes/LeagueSpartan-Variable.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
}

:root {
    --bg: oklch(0.9789 0.0013 106.42);
    --surface: oklch(1 0 0);
    --surface-raised: oklch(0.991 0.001 106);
    --surface-soft: oklch(0.9666 0.0026 106.45);
    --surface-inverse-hover: oklch(0.29 0.003 106);
    --fg: oklch(0.2130 0.0019 106.56);
    --muted: oklch(0.4999 0.0082 88.69);
    --muted-on-dark: oklch(0.80 0.008 90);
    --subtle-on-dark: oklch(0.65 0.008 90);
    --border: oklch(0.9046 0.0075 80.72);
    --border-strong: oklch(0.805 0.009 81);
    --border-on-dark: oklch(0.38 0.005 90);
    --divider-on-dark: oklch(0.34 0.005 90);
    --accent: oklch(0.7151 0.1795 52.15);
    --accent-strong: oklch(0.56 0.17 44);
    --accent-hover: oklch(0.50 0.16 44);
    --accent-soft: oklch(0.9665 0.0202 58.07);
    --accent-on-dark: oklch(0.88 0.10 63);
    --muted-on-accent: oklch(0.975 0.012 70);
    --success: oklch(0.46 0.20 300);
    --success-soft: oklch(0.96 0.024 300);
    --warning: oklch(0.5425 0.1242 62.55);
    --warning-soft: oklch(0.955 0.036 75);
    --danger: oklch(0.5003 0.1821 29.51);
    --danger-soft: oklch(0.96 0.028 29);
    --focus: oklch(0.5134 0.1603 255.67);
    --product-image-padding: 8%;

    --font-display: "League Spartan Market", "Basis Market", sans-serif;
    --font-body: "Basis Market", system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", monospace;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --radius-sm: .625rem;
    --radius-md: .875rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px color-mix(in oklch, var(--fg) 6%, transparent), 0 5px 18px color-mix(in oklch, var(--fg) 4%, transparent);
    --shadow-md: 0 18px 48px color-mix(in oklch, var(--fg) 10%, transparent);
    --shadow-lg: 0 24px 64px color-mix(in oklch, var(--fg) 14%, transparent);
    --shell: min(82rem, calc(100% - 3rem));
    --header-offset: 10.25rem;
    --transition-fast: .18s ease;
    --transition-medium: .25s ease;
}

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

html {
    color-scheme: light;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-offset);
    scrollbar-gutter: stable;
    overflow-x: clip;
}

body {
    min-width: 20rem;
    margin: 0;
    overflow-x: clip;
    color: var(--fg);
    background: var(--bg);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--accent-soft);
    color: var(--fg);
}

body.is-menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

button,
select,
a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: color-mix(in oklch, var(--accent) 16%, transparent);
}

button,
select { cursor: pointer; }
button:disabled,
select:disabled { cursor: not-allowed; }
h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
    color: var(--fg);
    line-height: 1.08;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

p { text-wrap: pretty; }

strong,
[data-product-price],
[data-cart-total] { font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }
[id] { scroll-margin-top: var(--header-offset); }

.shell { width: var(--shell); margin-inline: auto; }
.site-main { min-height: 58vh; }
.section { padding-block: clamp(3.5rem, 7vw, 6.25rem); }
.section-compact { padding-block: clamp(2.5rem, 5vw, 4rem); }

.inner-hero {
    border-bottom: 1px solid var(--border);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--accent-soft);
}

.inner-hero h1 {
    margin-bottom: .5rem;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 3.8rem);
    letter-spacing: -.05em;
}

.inner-hero p:last-child { margin-bottom: 0; }
.inner-hero > .shell > p:not(.eyebrow) { color: var(--muted); }

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.section-heading > div { min-width: 0; }

.section-heading h1,
.section-heading h2 {
    max-width: 18ch;
    margin-bottom: 0;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.8vw, 2.8rem);
    letter-spacing: -.045em;
}

.section-heading p {
    max-width: 38rem;
    margin: var(--space-2) 0 0;
    color: var(--muted);
}

.eyebrow {
    margin-bottom: var(--space-2);
    color: var(--accent-strong);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.lead { color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.muted { color: var(--muted); }

.text-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--accent-strong);
    font-weight: 750;
    text-underline-offset: .25rem;
}

.text-link:hover { text-decoration: underline; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1000;
    transform: translateY(-150%);
    padding: .625rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--fg);
    color: var(--surface);
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.button {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .5625rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: .6875rem 1.25rem;
    font-weight: 750;
    line-height: 1.15;
    text-align: center;
    transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.button:active { transform: translateY(0); }

.button:disabled,
.button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
    box-shadow: none;
}

.button[aria-disabled="true"] { pointer-events: none; }

.button-primary { background: var(--accent-strong); color: var(--surface); }
.button-primary:hover { background: var(--accent-hover); }

.button-secondary {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--fg);
}

.button-secondary:hover {
    border-color: var(--accent-strong);
    background: var(--accent-soft);
    color: var(--fg);
}

.button-dark { background: var(--fg); color: var(--surface); }
.button-dark:hover { background: var(--surface-inverse-hover); }

.button-commerce {
    border-color: var(--fg);
    background: var(--fg);
    color: var(--surface);
}

.button-commerce:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.button.is-added { background: var(--success); border-color: var(--success); color: var(--surface); }
.button-small { min-height: 2.75rem; padding: .625rem .875rem; font-size: .875rem; }
.button-wide { width: 100%; }

.field {
    display: grid;
    gap: .4375rem;
    min-width: 0;
}

.field label {
    color: var(--fg);
    font-size: .8125rem;
    font-weight: 750;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .6875rem .8125rem;
    background-color: var(--surface);
    color: var(--fg);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--muted); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    border-color: var(--accent-strong);
    outline: 3px solid color-mix(in oklch, var(--accent) 20%, transparent);
    outline-offset: 1px;
}

.field input:invalid:not(:placeholder-shown) { border-color: var(--danger); }

@media (max-width: 47.5rem) {
    :root { --shell: min(100% - 1.5rem, 80rem); --header-offset: 10.75rem; }
    .section-heading { align-items: start; flex-direction: column; gap: var(--space-3); }
    .section-heading h1, .section-heading h2 { max-width: 22ch; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}