/* ==== CONSENT TRAY ==== */
.tray-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 0.85rem var(--hs-gutter);
    color: var(--hs-fondo);
    background: var(--hs-tinta);
    border-top: 3px solid var(--hs-tallo);
}

.tray-consent-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    max-width: var(--hs-wrap);
    margin: 0 auto;
}

.tray-consent p {
    flex: 1 1 30rem;
    max-width: 52rem;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.tray-consent a {
    color: var(--hs-filete);
}

.tray-consent-acts {
    display: flex;
    gap: 0.6rem;
}

.tray-consent-btn {
    min-width: 9.5rem;
    min-height: 44px;
    padding: 0 1.2rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--hs-blanco);
    background: var(--hs-tallo);
    border: 2px solid var(--hs-tallo);
    border-radius: var(--hs-pill);
}

.tray-consent-btn.tray-no {
    color: var(--hs-fondo);
    background: transparent;
    border-color: var(--hs-filete);
}

/* ==== HERO ==== */
.hs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-top: clamp(1.75rem, 4vw, 3.25rem);
    padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.hs-hero-title {
    max-width: 19ch;
    margin-bottom: 1.5rem;
    font-size: clamp(2.4rem, 5vw, 4.3rem);
    line-height: 1.04;
}

.hs-hero-line {
    display: block;
}

.hs-hero-word {
    display: block;
    min-height: 1.08em;
    color: var(--hs-tallo);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--hs-barro);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.14em;
}

.hs-hero-word.hs-swap {
    animation: hs-rise 0.45s ease-out;
}

@keyframes hs-rise {
    from {
        clip-path: inset(0 0 100% 0);
        transform: translateY(0.3em);
    }

    to {
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

.hs-hero-text {
    max-width: 36rem;
    margin-bottom: 2rem;
    font-size: 1.15rem;
}

.hs-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

.hs-phone {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hs-phone a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--hs-mono);
    font-size: 1.1rem;
    color: var(--hs-tinta);
}

.hs-phone span {
    font-size: 0.88rem;
}

.hs-spec {
    align-self: end;
    padding: 1.6rem 1.6rem 1.3rem;
    background: var(--hs-fondo);
    border: 1px solid var(--hs-tinta);
    box-shadow: var(--hs-offset-big) var(--hs-offset-big) 0 var(--hs-tinta);
}

.hs-spec-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    font-family: var(--hs-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hs-barro);
    border-bottom: 2px dotted var(--hs-filete);
}

.hs-spec dl {
    margin: 0;
}

.hs-spec-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--hs-filete);
}

.hs-spec-row dt {
    font-family: var(--hs-serif);
    font-size: 1.3rem;
}

.hs-spec-row dd {
    margin: 0;
    font-family: var(--hs-mono);
    font-size: 0.95rem;
    text-align: right;
}

.hs-spec-row .hs-spec-sub {
    grid-column: 1 / -1;
    font-family: var(--hs-sans);
    font-size: 0.92rem;
    text-align: left;
}

.hs-spec-foot {
    margin: 1rem 0 0;
    font-size: 0.92rem;
}

/* ==== SECTIONS ==== */
.hs-sec {
    padding-top: 4rem;
    padding-bottom: 1rem;
}

.hs-sec-tight {
    padding-top: 2.5rem;
}

.hs-sec-wide {
    padding-top: 5.5rem;
}

.hs-sec-head {
    max-width: 44rem;
    margin-bottom: 2rem;
}

.hs-sec-head.hs-shift {
    margin-left: auto;
}

/* ==== COMPARE TABLE ==== */
.hs-tablebox {
    margin-bottom: calc(var(--hs-offset-big) + 1.5rem);
    background: var(--hs-fondo);
    border: 1px solid var(--hs-tinta);
    box-shadow: var(--hs-offset-big) var(--hs-offset-big) 0 var(--hs-tinta);
}

.hs-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.98rem;
}

.hs-table caption {
    padding: 1rem 1.1rem;
    font-family: var(--hs-mono);
    font-size: 0.8rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hs-barro);
    border-bottom: 2px dotted var(--hs-filete);
}

.hs-table th,
.hs-table td {
    padding: 0.85rem 1.1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hs-filete);
}

.hs-table thead th {
    font-family: var(--hs-serif);
    font-size: 1.15rem;
    font-weight: 500;
}

.hs-table tbody th {
    font-family: var(--hs-mono);
    font-size: 0.82rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hs-barro);
}

.hs-table tr:last-child th,
.hs-table tr:last-child td {
    border-bottom: 0;
}

.hs-table td a {
    display: inline-block;
}

.hs-table-num td {
    font-family: var(--hs-mono);
    font-size: 0.95rem;
}

/* ==== ROUTE (SVG PATH) ==== */
.hs-route {
    position: relative;
    isolation: isolate;
}

.hs-route-line {
    display: none;
}

.hs-route ol {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin: 0;
    padding: 0 0 0 1.5rem;
    list-style: none;
    border-left: 2px dashed var(--hs-barro);
}

.hs-step {
    padding: 1.2rem 1.3rem;
    background: var(--hs-fondo);
    border: 1px solid var(--hs-filete);
}

.hs-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.75rem;
    font-family: var(--hs-mono);
    font-size: 0.9rem;
    color: var(--hs-blanco);
    background: var(--hs-barro);
    border-radius: 50%;
}

.hs-step h3 {
    margin-bottom: 0.4rem;
}

.hs-step p {
    margin: 0;
    font-size: 0.98rem;
}

/* ==== INVERTED BLOCK ==== */
.hs-invert {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: calc(var(--hs-offset-big) + 1rem);
    padding: clamp(1.75rem, 4vw, 3.25rem);
    color: var(--hs-fondo);
    background: var(--hs-tinta);
    box-shadow: var(--hs-offset-big) var(--hs-offset-big) 0 var(--hs-tallo);
}

.hs-invert h2,
.hs-invert h3 {
    color: var(--hs-fondo);
}

.hs-invert a {
    color: var(--hs-filete);
}

.hs-invert .hs-kicker {
    color: var(--hs-filete);
}

.hs-invert .hs-kicker::after {
    border-top-color: var(--hs-gris);
}

.hs-invert .hs-table caption,
.hs-invert .hs-table tbody th {
    color: var(--hs-filete);
}

.hs-invert .hs-table th,
.hs-invert .hs-table td {
    border-bottom-color: var(--hs-gris);
}

.hs-care {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hs-care;
}

.hs-care li {
    position: relative;
    padding: 0 0 1.1rem 3.2rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px dashed var(--hs-gris);
    counter-increment: hs-care;
}

.hs-care li::before {
    position: absolute;
    left: 0;
    top: 0.1rem;
    content: counter(hs-care, decimal-leading-zero);
    font-family: var(--hs-mono);
    font-size: 1.1rem;
    color: var(--hs-filete);
}

.hs-care li:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.hs-care strong {
    display: block;
    font-family: var(--hs-serif);
    font-size: 1.2rem;
    font-weight: 500;
}

/* ==== MAKER ==== */
.hs-maker {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.hs-maker-text p:last-child {
    margin-bottom: 0;
}

.hs-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.hs-facts li {
    padding: 0.35rem 0.75rem;
    font-family: var(--hs-mono);
    font-size: 0.85rem;
    background: var(--hs-velo);
    border: 1px solid var(--hs-filete);
    border-radius: var(--hs-chip-r);
}

/* ==== CTA STRIP ==== */
.hs-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: calc(var(--hs-offset) + 1rem);
    padding: 1.75rem clamp(1.25rem, 3vw, 2.5rem);
    background: var(--hs-velo);
    border: 1px solid var(--hs-tinta);
    box-shadow: var(--hs-offset) var(--hs-offset) 0 var(--hs-barro);
}

.hs-cta h2 {
    margin-bottom: 0.3rem;
}

.hs-cta p {
    max-width: 38rem;
    margin: 0;
}

/* ==== CATALOG ==== */
.hs-group {
    padding-top: 2.75rem;
}

.hs-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px dotted var(--hs-filete);
}

.hs-group-head h2 {
    margin: 0;
}

.hs-group-head p {
    max-width: 36rem;
    margin: 0;
}

.hs-chip {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-family: var(--hs-mono);
    font-size: 0.85rem;
    color: var(--hs-tinta);
    background: var(--hs-velo);
    border: 1px solid var(--hs-filete);
    border-radius: var(--hs-chip-r);
}

.hs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1.5rem;
}

.hs-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--hs-tinta);
    text-decoration: none;
    background: var(--hs-fondo);
    border: 1px solid var(--hs-filete);
}

.hs-item:hover {
    color: var(--hs-tinta);
    border-color: var(--hs-tinta);
    box-shadow: var(--hs-offset) var(--hs-offset) 0 var(--hs-tinta);
}

.hs-item-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem 1.15rem;
}

.hs-item h3 {
    margin: 0;
    font-size: 1.15rem;
}

.hs-item p {
    margin: 0;
    font-size: 0.95rem;
}

.hs-item-price {
    margin-top: auto;
    padding-top: 0.6rem;
    font-family: var(--hs-mono);
    font-size: 1rem;
}

/* ==== FABRIC SWATCH (CSS weave instead of product photos) ==== */
.hs-tela {
    --hs-paso: 2px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    margin: 0;
    padding: 0.9rem;
    background-color: var(--hs-tono);
    background-image:
        linear-gradient(103deg, #FFFFFF00 28%, #FFFFFF2E 33%, #FFFFFF00 39%),
        linear-gradient(78deg, #00000000 58%, #0000001F 62%, #00000000 67%),
        linear-gradient(168deg, #FFFFFF00 70%, #FFFFFF1A 74%, #FFFFFF00 79%),
        repeating-linear-gradient(90deg, #FFFFFF00 0 11px, #FFFFFF1C 11px 12px, #FFFFFF00 12px 29px, #00000014 29px 30px, #FFFFFF00 30px 47px),
        repeating-linear-gradient(0deg, #FFFFFF00 0 17px, #00000012 17px 18px, #FFFFFF00 18px 37px, #FFFFFF17 37px 38px, #FFFFFF00 38px 53px),
        repeating-linear-gradient(0deg, #FFFFFF24 0 1px, #FFFFFF00 1px var(--hs-paso)),
        repeating-linear-gradient(90deg, #0000001F 0 1px, #00000000 1px var(--hs-paso));
}

.hs-tela-ligero {
    --hs-paso: 3px;
}

.hs-trama-sarga {
    background-image:
        linear-gradient(103deg, #FFFFFF00 28%, #FFFFFF1F 33%, #FFFFFF00 39%),
        linear-gradient(78deg, #00000000 58%, #0000001A 62%, #00000000 67%),
        repeating-linear-gradient(45deg, #FFFFFF21 0 1px, #FFFFFF00 1px 3px),
        repeating-linear-gradient(45deg, #00000000 0 2px, #0000001A 2px 3px),
        repeating-linear-gradient(0deg, #0000000F 0 1px, #00000000 1px 4px);
}

.hs-trama-punto {
    background-image:
        linear-gradient(98deg, #FFFFFF00 30%, #FFFFFF24 35%, #FFFFFF00 41%),
        linear-gradient(172deg, #00000000 62%, #00000014 66%, #00000000 71%),
        repeating-linear-gradient(90deg, #0000001A 0 1px, #00000000 1px 4px),
        repeating-linear-gradient(60deg, #FFFFFF1C 0 1px, #FFFFFF00 1px 4px),
        repeating-linear-gradient(120deg, #0000000F 0 1px, #00000000 1px 4px);
}

.hs-trama-raya {
    background-image:
        linear-gradient(103deg, #FFFFFF00 28%, #FFFFFF2E 33%, #FFFFFF00 39%),
        linear-gradient(78deg, #00000000 58%, #0000001F 62%, #00000000 67%),
        repeating-linear-gradient(0deg, #FFFFFF24 0 1px, #FFFFFF00 1px 2px),
        repeating-linear-gradient(90deg, #0000001A 0 1px, #00000000 1px 2px),
        repeating-linear-gradient(90deg, var(--hs-raya) 0 7px, #FFFFFF00 7px 15px, var(--hs-raya) 15px 17px, #FFFFFF00 17px 30px);
}

.hs-tela-piedra {
    background-image:
        linear-gradient(#FFFFFF1A, #FFFFFF1A),
        radial-gradient(ellipse 38% 30% at 22% 28%, #FFFFFF33, #FFFFFF00 72%),
        radial-gradient(ellipse 30% 42% at 78% 62%, #0000002B, #00000000 70%),
        radial-gradient(ellipse 26% 20% at 58% 14%, #FFFFFF26, #FFFFFF00 70%),
        radial-gradient(ellipse 34% 24% at 30% 86%, #00000024, #00000000 72%),
        radial-gradient(ellipse 20% 26% at 90% 18%, #FFFFFF1F, #FFFFFF00 70%),
        radial-gradient(ellipse 18% 14% at 48% 48%, #0000001A, #00000000 70%),
        radial-gradient(ellipse 22% 16% at 8% 60%, #FFFFFF1F, #FFFFFF00 70%),
        repeating-linear-gradient(117deg, #FFFFFF00 0 5px, #FFFFFF0D 5px 6px, #FFFFFF00 6px 13px, #0000000D 13px 14px, #FFFFFF00 14px 19px),
        repeating-linear-gradient(71deg, #00000000 0 7px, #0000000B 7px 8px, #00000000 8px 17px, #FFFFFF0B 17px 18px, #FFFFFF00 18px 23px),
        repeating-linear-gradient(152deg, #FFFFFF00 0 11px, #FFFFFF0A 11px 12px, #FFFFFF00 12px 29px),
        repeating-linear-gradient(0deg, #FFFFFF12 0 1px, #FFFFFF00 1px 3px),
        repeating-linear-gradient(90deg, #00000014 0 1px, #00000000 1px 3px);
}

.hs-tela::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
        radial-gradient(#0000001A 0.6px, #00000000 0.9px),
        radial-gradient(#FFFFFF1A 0.6px, #FFFFFF00 0.9px);
    background-position: 0 0, 1px 2px;
    background-size: 3px 3px, 5px 4px;
    pointer-events: none;
}

.hs-tela::after {
    position: absolute;
    inset: 0;
    content: "";
    background: radial-gradient(ellipse at center, #26272B00 58%, #26272B38 100%);
    pointer-events: none;
}

.hs-tela-tag {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-width: 85%;
    margin: 0;
    padding: 0.45rem 0.7rem 0.5rem;
    color: var(--hs-tinta);
    background: var(--hs-fondo);
    border: 1px solid var(--hs-tinta);
    border-radius: var(--hs-chip-r);
    box-shadow: 3px 3px 0 var(--hs-tinta);
}

.hs-tela-line {
    font-family: var(--hs-mono);
    font-size: 0.72rem;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--hs-barro);
}

.hs-tela-name {
    font-family: var(--hs-serif);
    font-size: 1rem;
    line-height: 1.2;
}

.hs-tela-meta {
    padding-top: 0.2rem;
    font-size: 0.85rem;
    line-height: 1.3;
}

.hs-tela-piece {
    padding: 1.25rem;
}

.hs-tela-piece .hs-tela-name {
    font-size: 1.35rem;
}

.hs-tela-cart,
.hs-tela-drawer {
    aspect-ratio: 4 / 5;
    padding: 0.35rem;
}

.hs-tela-cart .hs-tela-tag,
.hs-tela-drawer .hs-tela-tag {
    max-width: 100%;
    padding: 0.25rem 0.35rem;
    box-shadow: 2px 2px 0 var(--hs-tinta);
}

.hs-tela-cart .hs-tela-line,
.hs-tela-drawer .hs-tela-line {
    font-size: 0.6rem;
}

.hs-tela-cart .hs-tela-name,
.hs-tela-drawer .hs-tela-name {
    font-size: 0.74rem;
}

.hs-intro-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.hs-intro-card {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--hs-filete);
    border-left: 4px solid var(--hs-barro);
}

.hs-intro-card p {
    margin: 0;
    font-size: 0.98rem;
}

/* ==== PIECE PAGE ==== */
.hs-piece {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-top: 2.5rem;
}

.hs-piece-info h1 {
    margin-bottom: 0.4rem;
    font-size: clamp(2rem, 3.4vw, 2.75rem);
}

.hs-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin: 0 0 1.25rem;
}

.hs-price strong {
    font-family: var(--hs-mono);
    font-size: 1.6rem;
    font-weight: 400;
}

.hs-price span {
    font-size: 0.95rem;
}

.hs-buy {
    margin-bottom: 1.5rem;
    padding: 1.3rem;
    border: 1px solid var(--hs-tinta);
    box-shadow: var(--hs-offset) var(--hs-offset) 0 var(--hs-tinta);
}

.hs-sizes {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.hs-sizes legend {
    margin-bottom: 0.6rem;
    padding: 0;
    font-weight: 600;
}

.hs-size-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hs-size {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    min-height: 48px;
    padding: 0.35rem 0.8rem;
    cursor: pointer;
}

.hs-size input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    appearance: none;
    background: var(--hs-blanco);
    border: 1px solid var(--hs-tinta);
    border-radius: var(--hs-chip-r);
}

.hs-size input:checked {
    background: var(--hs-tinta);
}

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

.hs-size span,
.hs-size small {
    position: relative;
    pointer-events: none;
}

.hs-size span {
    font-family: var(--hs-mono);
    font-size: 0.98rem;
}

.hs-size input:checked + span {
    color: var(--hs-blanco);
}

.hs-size small {
    font-size: 0.72rem;
    line-height: 1.1;
}

.hs-size-off {
    cursor: not-allowed;
}

.hs-size-off input {
    cursor: not-allowed;
    background: var(--hs-velo);
    border-style: dashed;
}

.hs-size-off span {
    text-decoration: line-through;
}

.hs-buy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.hs-buy-row .hs-field {
    width: 7rem;
    margin: 0;
}

.hs-add {
    flex: 1 1 12rem;
}

.hs-buy-msg {
    min-height: 1.5em;
    margin: 0.75rem 0 0;
    font-weight: 600;
}

.hs-buy-msg a {
    font-weight: 600;
}

.hs-specs {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    margin: 0 0 1.5rem;
    border-top: 1px solid var(--hs-filete);
}

.hs-specs dt,
.hs-specs dd {
    margin: 0;
    padding: 0.6rem 0;
    border-bottom: 1px dotted var(--hs-filete);
}

.hs-specs dt {
    padding-right: 1rem;
    font-family: var(--hs-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hs-barro);
}

.hs-mini {
    padding: 1.1rem 1.2rem;
    background: var(--hs-velo);
    border: 1px solid var(--hs-filete);
}

.hs-mini p {
    margin: 0 0 0.5rem;
    font-size: 0.96rem;
}

.hs-mini p:last-child {
    margin: 0;
}

.hs-piece-text {
    padding-top: 3rem;
}

.hs-piece-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.hs-panel {
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--hs-filete);
}

.hs-panel h2 {
    font-size: 1.4rem;
}

.hs-panel ul {
    margin: 0;
    padding-left: 1.1rem;
}

.hs-panel li {
    margin-bottom: 0.4rem;
}

.hs-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

/* ==== DRAWER ==== */
.hs-shade {
    position: fixed;
    inset: 0;
    z-index: 44;
    visibility: hidden;
    background: #26272B73;
}

.hs-shade.out {
    visibility: visible;
}

.hs-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    width: min(27rem, 100%);
    visibility: hidden;
    background: var(--hs-fondo);
    border-left: 2px solid var(--hs-tinta);
    transform: translateX(100%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.hs-drawer.out {
    visibility: visible;
    transform: none;
    transition: transform 0.25s ease;
}

.hs-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 2px dotted var(--hs-filete);
}

.hs-drawer-head h2 {
    margin: 0;
    font-size: 1.5rem;
}

.hs-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--hs-tinta);
    border-radius: var(--hs-pill);
}

.hs-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.hs-drawer-foot {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--hs-filete);
}

.hs-drawer-foot .hs-btn {
    width: 100%;
    margin-top: 0.6rem;
}

.hs-drawer-sub {
    display: flex;
    justify-content: space-between;
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.hs-dline {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px dotted var(--hs-filete);
}

.hs-dline p {
    margin: 0;
    font-size: 0.95rem;
}

.hs-dline-name {
    font-weight: 600;
}

.hs-dline-price {
    font-family: var(--hs-mono);
    font-size: 0.95rem;
    white-space: nowrap;
}

.hs-empty {
    padding: 1.5rem 0;
}

/* ==== CART PAGE ==== */
.hs-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.hs-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hs-tinta);
}

.hs-line {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.6rem 1.1rem;
    padding: 1.1rem 0;
    border-bottom: 1px dotted var(--hs-gris);
}

.hs-line-pic {
    grid-row: span 2;
    text-decoration: none;
}

.hs-line h2 {
    margin: 0 0 0.2rem;
    font-size: 1.2rem;
}

.hs-line h2 a {
    color: var(--hs-tinta);
}

.hs-line p {
    margin: 0;
    font-size: 0.95rem;
}

.hs-line-ctl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.hs-line-ctl select {
    min-height: 44px;
    padding: 0 0.6rem;
    background: var(--hs-blanco);
    border: 1px solid var(--hs-tinta);
    border-radius: var(--hs-field-r);
}

.hs-line-amount {
    margin-left: auto;
    font-family: var(--hs-mono);
}

.hs-del {
    min-height: 44px;
    padding: 0 0.9rem;
    font-size: 0.92rem;
    background: transparent;
    border: 1px solid var(--hs-barro);
    border-radius: var(--hs-pill);
}

.hs-notes {
    margin: 0 0 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--hs-velo);
    border-left: 4px solid var(--hs-barro);
}

.hs-notes p {
    margin: 0;
    font-size: 0.95rem;
}

.hs-sum {
    padding: 1.4rem 1.5rem;
    background: var(--hs-fondo);
    border: 1px solid var(--hs-tinta);
    box-shadow: var(--hs-offset) var(--hs-offset) 0 var(--hs-tinta);
}

.hs-sum h2 {
    font-size: 1.45rem;
}

.hs-sum dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 0 1rem;
}

.hs-sum dt,
.hs-sum dd {
    margin: 0;
    padding: 0.55rem 0;
    border-bottom: 1px dotted var(--hs-filete);
}

.hs-sum dd {
    font-family: var(--hs-mono);
    text-align: right;
}

.hs-sum .hs-total {
    font-weight: 700;
    border-bottom: 0;
}

.hs-sum-note {
    font-size: 0.92rem;
}

.hs-sum .hs-btn {
    width: 100%;
}

.hs-sum-lines {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.hs-sum-lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.95rem;
    border-bottom: 1px dotted var(--hs-filete);
}

/* ==== CHECKOUT ==== */
.hs-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.hs-fset {
    min-width: 0;
    margin: 0 0 1.75rem;
    padding: 1.4rem 1.4rem 0.6rem;
    border: 1px solid var(--hs-filete);
}

.hs-fset legend {
    padding: 0 0.5rem;
    font-family: var(--hs-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hs-barro);
}

.hs-fgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
}

.hs-pay {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--hs-velo);
    border: 1px solid var(--hs-tinta);
    border-radius: var(--hs-field-r);
}

.hs-pay p {
    margin: 0.4rem 0 0 2rem;
    font-size: 0.95rem;
}

.hs-zone {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    font-weight: 600;
    background: var(--hs-velo);
    border-left: 4px solid var(--hs-barro);
}

/* ==== CONFIRM / STATUS ==== */
.hs-done {
    padding: 1.6rem;
    margin-bottom: calc(var(--hs-offset-big) + 1.5rem);
    border: 1px solid var(--hs-tinta);
    box-shadow: var(--hs-offset-big) var(--hs-offset-big) 0 var(--hs-tallo);
}

.hs-ordno {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.4rem 0.9rem;
    font-family: var(--hs-mono);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    background: var(--hs-velo);
    border: 1px dashed var(--hs-tinta);
    border-radius: var(--hs-chip-r);
}

.hs-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.hs-box {
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--hs-filete);
}

.hs-box h2,
.hs-box h3 {
    font-size: 1.3rem;
}

.hs-box p:last-child,
.hs-box ul:last-child {
    margin-bottom: 0;
}

.hs-track {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hs-track;
}

.hs-track li {
    position: relative;
    padding: 0.8rem 0 0.8rem 3rem;
    border-bottom: 1px dotted var(--hs-filete);
    counter-increment: hs-track;
}

.hs-track li::before {
    position: absolute;
    left: 0;
    top: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    content: counter(hs-track);
    font-family: var(--hs-mono);
    font-size: 0.85rem;
    color: var(--hs-tinta);
    border: 1px solid var(--hs-tinta);
    border-radius: 50%;
}

.hs-track li.here::before {
    color: var(--hs-blanco);
    background: var(--hs-tallo);
    border-color: var(--hs-tallo);
}

.hs-track strong {
    display: block;
}

.hs-result {
    margin-top: 1.25rem;
    padding: 1.1rem 1.2rem;
    background: var(--hs-velo);
    border-left: 4px solid var(--hs-tallo);
}

.hs-result p {
    margin: 0 0 0.3rem;
}

/* ==== CONTACT ==== */
.hs-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.hs-data {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 1.25rem;
    border-top: 1px solid var(--hs-tinta);
}

.hs-data div {
    padding: 0.7rem 0;
    border-bottom: 1px dotted var(--hs-gris);
}

.hs-data dt {
    font-family: var(--hs-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hs-barro);
}

.hs-data dd {
    margin: 0;
}

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

.hs-formcard {
    padding: 1.2rem 1.4rem 1rem;
    background: var(--hs-fondo);
    border: 1px solid var(--hs-tinta);
    box-shadow: var(--hs-offset) var(--hs-offset) 0 var(--hs-tinta);
}

.hs-formcard h2 {
    margin-bottom: 0.3rem;
    font-size: 1.2rem;
}

.hs-formcard textarea {
    min-height: 4.5rem;
}

.hs-pagehead-tight {
    padding-bottom: 0.25rem;
}

.hs-formcard .hs-field {
    margin-bottom: 0.6rem;
}

/* ==== LEGAL / SERVICE TEXT ==== */
.hs-legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.hs-toc {
    padding: 1.2rem 1.3rem;
    background: var(--hs-velo);
    border: 1px solid var(--hs-filete);
}

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

.hs-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hs-toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--hs-tinta);
    border-bottom: 1px dotted var(--hs-filete);
}

.hs-sect {
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 2px dotted var(--hs-filete);
}

.hs-sect:last-child {
    border-bottom: 0;
}

.hs-sect h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.hs-sect ul,
.hs-sect ol {
    padding-left: 1.2rem;
}

.hs-sect li {
    margin-bottom: 0.4rem;
}

.hs-reqs {
    width: 100%;
    margin: 0 0 1.25rem;
    border-collapse: collapse;
    border: 1px solid var(--hs-tinta);
}

.hs-reqs caption {
    padding-bottom: 0.5rem;
    font-family: var(--hs-mono);
    font-size: 0.8rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hs-barro);
}

.hs-reqs th,
.hs-reqs td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--hs-filete);
}

.hs-reqs th {
    width: 34%;
    font-weight: 600;
    background: var(--hs-velo);
}

.hs-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.hs-cards li {
    margin: 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--hs-filete);
    border-left: 4px solid var(--hs-tallo);
}

.hs-cards strong {
    display: block;
    margin-bottom: 0.2rem;
}

.hs-quote {
    margin: 0 0 1.25rem;
    padding: 1.2rem 1.4rem;
    font-size: 0.98rem;
    background: var(--hs-blanco);
    border: 1px dashed var(--hs-tinta);
}

.hs-quote p:last-child {
    margin-bottom: 0;
}

.hs-stamp {
    font-family: var(--hs-mono);
    font-size: 0.85rem;
}

.hs-reset {
    margin-top: 0.5rem;
}

/* ==== THANKS / 404 ==== */
.hs-solo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-top: 1rem;
}

.hs-big {
    margin: 0;
    font-family: var(--hs-serif);
    font-size: clamp(5rem, 14vw, 10rem);
    line-height: 1;
    color: var(--hs-filete);
}

/* ==== RESPONSIVE ==== */
@media (max-width: 39.99em) {
    .tray-consent-acts {
        width: 100%;
    }

    .tray-consent-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .hs-table {
        font-size: 0.88rem;
    }

    .hs-table th,
    .hs-table td {
        padding: 0.6rem 0.45rem;
    }

    .hs-table thead th {
        font-size: 0.98rem;
    }

    .hs-table tbody th {
        font-size: 0.72rem;
        letter-spacing: 0;
    }

    .hs-drawer {
        top: auto;
        left: 0;
        width: 100%;
        max-height: 86vh;
        border-top: 2px solid var(--hs-tinta);
        border-left: 0;
        transform: translateY(100%);
    }
}

@media (min-width: 40em) {
    .hs-fgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-fwide {
        grid-column: 1 / -1;
    }

    .hs-intro-cards,
    .hs-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-line {
        grid-template-columns: 8.5rem minmax(0, 1fr);
    }
}

@media (min-width: 60em) {
    .hs-hero {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        align-items: end;
        padding-left: clamp(0rem, 5vw, 5rem);
    }

    .hs-spec {
        margin-bottom: 2.5rem;
    }

    .hs-route-line {
        position: absolute;
        inset: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
    }

    .hs-route ol {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4.5rem 3rem;
        padding: 0;
        border-left: 0;
    }

    .hs-route li:nth-child(4) {
        grid-row: 2;
        grid-column: 3;
    }

    .hs-route li:nth-child(5) {
        grid-row: 2;
        grid-column: 2;
    }

    .hs-route li:nth-child(6) {
        grid-row: 2;
        grid-column: 1;
    }

    .hs-invert {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        margin-left: 6%;
    }

    .hs-maker {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 3.5rem;
    }

    .hs-intro-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hs-piece {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }

    .hs-tela-piece {
        aspect-ratio: 4 / 5;
        padding: 1.75rem;
    }

    .hs-piece-cols {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    }

    .hs-cart,
    .hs-checkout {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 3rem;
    }

    .hs-sum {
        position: sticky;
        top: calc(var(--hs-head) + 1.5rem);
    }

    .hs-contact {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 3rem;
    }

    .hs-contact .hs-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }

    .hs-legal {
        grid-template-columns: 16rem minmax(0, 1fr);
        gap: 3rem;
    }

    .hs-toc {
        position: sticky;
        top: calc(var(--hs-head) + 1.5rem);
    }

    .hs-solo {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: center;
    }
}

@media (max-width: 59.99em) {
    .hs-piece-info {
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-hero-word.hs-swap {
        animation: none;
    }

    .hs-drawer,
    .hs-drawer.out,
    .with-js .hs-nav,
    .with-js .hs-nav.out {
        transition: none;
    }
}

/* ==== HIDDEN ==== */
[hidden] {
    display: none;
}


/* ==== FABRIC TONES (generated by build.py from src/telas.json) ==== */
.hs-c-camisa-larga-blanca {
    --hs-tono: #F1EFE8;
}

.hs-c-camisa-corta-cielo {
    --hs-tono: #A8C0D2;
}

.hs-c-pantalon-cordon-arena {
    --hs-tono: #D2C2A2;
}

.hs-c-bermuda-caqui {
    --hs-tono: #9A9268;
}

.hs-c-vestido-tirantes-salvia {
    --hs-tono: #A2AD91;
}

.hs-c-blusa-redonda-rosa {
    --hs-tono: #CDA69B;
}

.hs-c-falda-midi-negra {
    --hs-tono: #2C2C2F;
}

.hs-c-sobrecamisa-piedra {
    --hs-tono: #A29D94;
}

.hs-c-kimono-indigo {
    --hs-tono: #35425F;
}

.hs-c-mono-terracota {
    --hs-tono: #AE6549;
}

.hs-c-ancho-humo {
    --hs-tono: #7E7F83;
}

.hs-c-top-lazada-crudo {
    --hs-tono: #E2D8C3;
}

.hs-c-camisa-rayas {
    --hs-tono: #F1EFE8;
    --hs-raya: #5A7A9F;
}

.hs-c-chaleco-sastre-marengo {
    --hs-tono: #4A4C51;
}

.hs-c-camiseta-lino-blanca {
    --hs-tono: #F3F1EC;
}