/* ==== FONTS ==== */
@font-face {
    font-family:'Albert Sans';
    font-style:normal;
    font-weight:400 700;
    font-display:swap;
    src:url('../fonts/albert-sans.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family:'Albert Sans Fallback';
    src:local('Arial');
    size-adjust:103.87%;
    ascent-override:91.50%;
}
@font-face {
    font-family:'Fraunces';
    font-style:normal;
    font-weight:400 600;
    font-display:swap;
    src:url('../fonts/fraunces.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family:'Fraunces Fallback';
    src:local('Georgia');
    size-adjust:105.68%;
    ascent-override:92.70%;
}

/* ==== TOKENS ==== */
:root {
    --hs-fondo: #F7F7F8;
    --hs-velo: #EEEFF1;
    --hs-filete: #DCDEE2;
    --hs-gris: #8E9097;
    --hs-tinta: #26272B;
    --hs-tallo: #5E6B3A;
    --hs-barro: #8E5B4A;
    --hs-blanco: #FFFFFF;
    --hs-head: 4.75rem;
    --hs-wrap: 76rem;
    --hs-gutter: clamp(1rem, 4vw, 2.5rem);
    --hs-side: max(var(--hs-gutter), calc((100% - var(--hs-wrap)) / 2));
    --hs-endw: 10.5rem;
    --hs-offset: 6px;
    --hs-offset-big: 10px;
    --hs-pill: 999px;
    --hs-chip-r: 4px;
    --hs-field-r: 6px;
    --hs-sans: 'Albert Sans', 'Albert Sans Fallback', Arial, sans-serif;
    --hs-serif: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
    --hs-mono: ui-monospace, monospace;
}

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

html {
    scroll-padding-top: calc(var(--hs-head) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--hs-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--hs-tinta);
    background: var(--hs-fondo);
}

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

svg {
    display: block;
}

h1,
h2,
h3 {
    margin: 0 0 0.6em;
    font-family: var(--hs-serif);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: normal;
}

h1 {
    font-size: clamp(2.1rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

h3 {
    font-size: 1.25rem;
}

p,
ul,
ol,
dl,
table,
figure {
    margin: 0 0 1rem;
}

a {
    color: var(--hs-tallo);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--hs-tinta);
}

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

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

sup {
    line-height: 0;
}

/* ==== LAYOUT ==== */
.hs-wrap {
    width: min(var(--hs-wrap), calc(100% - 2 * var(--hs-gutter)));
    margin-left: auto;
    margin-right: auto;
}

.hs-main {
    display: block;
    padding-bottom: 4.5rem;
}

.hs-narrow {
    max-width: 46rem;
}

/* ==== HEADER ==== */
.hs-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--hs-head);
    padding-left: var(--hs-side);
    padding-right: var(--hs-side);
    background: var(--hs-fondo);
    border-bottom: 2px dotted var(--hs-filete);
}

.hs-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    font-family: var(--hs-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--hs-tinta);
    text-decoration: none;
}

.hs-logo svg {
    width: 1.9rem;
    height: 1.9rem;
}

.hs-top-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: var(--hs-endw);
    margin-left: auto;
}

.hs-cartbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0 1.1rem 0 1rem;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--hs-blanco);
    text-decoration: none;
    background: var(--hs-tinta);
    border: 2px solid var(--hs-tinta);
    border-radius: var(--hs-pill);
    box-shadow: 3px 3px 0 var(--hs-tallo);
}

.hs-cartbtn:hover {
    color: var(--hs-blanco);
    background: var(--hs-tallo);
    border-color: var(--hs-tallo);
    box-shadow: 3px 3px 0 var(--hs-tinta);
}

.hs-cartbtn svg {
    width: 1.2rem;
    height: 1.2rem;
}

.hs-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.35rem;
    font-family: var(--hs-mono);
    font-size: 0.85rem;
    color: var(--hs-tinta);
    background: var(--hs-fondo);
    border-radius: var(--hs-pill);
}

.hs-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--hs-tinta);
    border-radius: var(--hs-pill);
}

.hs-burger svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* ==== NAV ==== */
.hs-nav {
    position: sticky;
    top: 0;
    z-index: 21;
    display: flex;
    align-items: center;
    width: fit-content;
    height: var(--hs-head);
    margin-top: calc(-1 * var(--hs-head));
    margin-left: auto;
    margin-right: calc(var(--hs-side) + var(--hs-endw) + 1rem);
}

.hs-nav ul {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hs-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.95rem;
    font-weight: 500;
    color: var(--hs-tinta);
    text-decoration: none;
    border-radius: var(--hs-pill);
}

.hs-nav a:hover {
    background: var(--hs-velo);
}

.hs-nav a.here {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--hs-barro);
    text-decoration-thickness: 2px;
}

.hs-nav-head {
    display: none;
}

/* ==== FOOTER ==== */
.hs-foot {
    padding-top: 3rem;
    padding-bottom: 2rem;
    border-top: 2px dotted var(--hs-filete);
}

.hs-foot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.hs-foot-brand p {
    max-width: 22rem;
    margin-top: 0.75rem;
    font-size: 0.98rem;
}

.hs-foot h2 {
    margin-bottom: 0.5rem;
    font-family: var(--hs-mono);
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hs-barro);
}

.hs-foot ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hs-foot li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--hs-tinta);
    text-decoration: none;
}

.hs-foot li a:hover {
    text-decoration: underline;
}

.hs-foot-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    font-size: 0.92rem;
    border-top: 1px solid var(--hs-filete);
}

.hs-foot-legal p {
    margin: 0;
}

/* ==== TYPE BITS ==== */
.hs-kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.1rem;
    font-family: var(--hs-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hs-barro);
}

.hs-kicker::after {
    flex: 1 1 auto;
    max-width: 9rem;
    height: 0;
    content: "";
    border-top: 2px dotted var(--hs-filete);
}

.hs-num {
    color: var(--hs-tinta);
}

.hs-lead {
    max-width: 40rem;
    font-size: 1.2rem;
    line-height: 1.55;
}

.hs-rule {
    height: 0;
    margin: 2.5rem 0;
    border: 0;
    border-top: 2px dotted var(--hs-filete);
}

.hs-note {
    font-size: 0.95rem;
}

/* ==== BUTTONS ==== */
.hs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 50px;
    padding: 0 1.6rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--hs-blanco);
    text-decoration: none;
    background: var(--hs-tallo);
    border: 2px solid var(--hs-tallo);
    border-radius: var(--hs-pill);
    box-shadow: 3px 3px 0 var(--hs-tinta);
}

.hs-btn:hover {
    color: var(--hs-blanco);
    background: var(--hs-tinta);
    border-color: var(--hs-tinta);
}

.hs-btn:disabled {
    cursor: progress;
    background: var(--hs-gris);
    border-color: var(--hs-gris);
}

.hs-btn-line {
    color: var(--hs-tinta);
    background: transparent;
    border-color: var(--hs-tinta);
    box-shadow: none;
}

.hs-btn-line:hover {
    color: var(--hs-blanco);
}

/* ==== PAGE HEAD ==== */
.hs-pagehead {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

.hs-pagehead h1 {
    max-width: 22ch;
}

.hs-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 0.92rem;
    list-style: none;
}

.hs-crumbs li + li::before {
    margin-right: 0.6rem;
    content: "/";
    color: var(--hs-gris);
}

.hs-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ==== FORMS ==== */
.hs-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.1rem;
}

.hs-field label {
    font-weight: 600;
    font-size: 0.98rem;
}

.hs-field input,
.hs-field select,
.hs-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    background: var(--hs-blanco);
    border: 1px solid var(--hs-tinta);
    border-radius: var(--hs-field-r);
}

.hs-field textarea {
    min-height: 8.5rem;
    resize: vertical;
}

.hs-field input[aria-invalid="true"],
.hs-field select[aria-invalid="true"],
.hs-field textarea[aria-invalid="true"] {
    border-color: var(--hs-barro);
    box-shadow: 0 0 0 1px var(--hs-barro);
}

.hs-hint {
    font-size: 0.9rem;
    color: var(--hs-tinta);
}

.hs-err {
    min-height: 0;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hs-barro);
}

.hs-check {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-height: 44px;
    margin-bottom: 0.4rem;
    font-size: 0.98rem;
}

.hs-check input {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0.15rem 0 0;
    accent-color: var(--hs-tallo);
}

.hs-formmsg {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--hs-barro);
}

/* ==== JS SWITCHES ==== */
html:not(.with-js) .hs-jsonly {
    display: none;
}

.with-js .hs-nojs {
    display: none;
}

/* ==== RESPONSIVE BASE ==== */
@media (min-width: 48em) {
    .hs-foot-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}

@media (max-width: 59.99em) {
    :root {
        --hs-head: 4.25rem;
        --hs-endw: auto;
    }

    .hs-logo {
        font-size: 1.3rem;
    }

    .hs-top-end {
        width: auto;
    }

    .with-js .hs-burger {
        display: inline-flex;
    }

    .hs-nav {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0.5rem var(--hs-gutter);
        border-bottom: 2px dotted var(--hs-filete);
    }

    .hs-nav ul {
        flex-wrap: wrap;
    }

    .with-js .hs-nav {
        position: fixed;
        inset: 0;
        z-index: 50;
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        padding: 0 var(--hs-gutter) 2rem;
        visibility: hidden;
        background: var(--hs-fondo);
        border-bottom: 0;
        transform: translateY(-0.75rem);
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .with-js .hs-nav.out {
        visibility: visible;
        transform: none;
        transition: transform 0.2s ease;
    }

    .with-js .hs-nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--hs-head);
        margin-bottom: 1.5rem;
        border-bottom: 2px dotted var(--hs-filete);
    }

    .hs-nav-title {
        font-family: var(--hs-serif);
        font-size: 1.3rem;
    }

    .with-js .hs-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .with-js .hs-nav a {
        min-height: 56px;
        padding: 0 0.25rem;
        font-family: var(--hs-serif);
        font-size: 1.6rem;
        border-bottom: 1px solid var(--hs-filete);
        border-radius: 0;
    }
}

@media (max-width: 26em) {
    .hs-logo svg {
        display: none;
    }

    .hs-cartbtn {
        padding: 0 0.8rem;
    }

    .hs-cart-word {
        display: none;
    }
}