@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Italiana&display=swap');

:root {

    --ink: #242321;

    --muted: #787570;

    --line: #eae7e1;

    --cream: #f7f6f2;

    --gold: #967653;

    --white: #fff;

    --shadow: 0 20px 70px #24232112

}

* {

    box-sizing: border-box

}

html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px

}

body {

    margin: 0;

    color: var(--ink);

    background: white;

    font-family: 'DM Sans', sans-serif;

    -webkit-font-smoothing: antialiased

}

button,

input,

select {

    font: inherit

}

button {

    cursor: pointer

}

a {

    color: inherit;

    text-decoration: none

}

button:focus-visible,

a:focus-visible,

input:focus-visible,

select:focus-visible {

    outline: 2px solid var(--gold);

    outline-offset: 3px

}

.serif {

    font-family: Italiana, Georgia, serif;

    font-weight: 400

}

.announce {

    background: #292724;

    color: #fff;

    text-align: center;

    padding: 9px 15px;

    font-size: 10px;

    letter-spacing: .15em;

    text-transform: uppercase

}

.header {

    position: sticky;

    top: 0;

    background: #fffffff2;

    backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--line);

    z-index: 20

}

.nav {

    max-width: 1340px;

    margin: auto;

    padding: 0 5%;

    height: 76px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px

}

.brand {

    font-size: 17px;

    font-weight: 700;

    letter-spacing: .17em;

    line-height: 1.1

}

.brand small {

    display: block;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .31em;

    margin-top: 5px

}

.navlinks {

    display: flex;

    gap: 32px

}

.navlinks a {

    font-size: 11px;

    letter-spacing: .11em;

    text-transform: uppercase

}

.navlinks a:hover {

    color: var(--gold)

}

.cart-button {

    border: 1px solid var(--line);

    background: white;

    border-radius: 30px;

    padding: 11px 15px;

    font-size: 12px

}

.cart-button b {

    display: inline-grid;

    place-items: center;

    background: var(--ink);

    color: white;

    border-radius: 50%;

    height: 20px;

    min-width: 20px;

    margin-left: 5px

}

.menu-button {

    display: none;

    border: 0;

    background: none;

    font-size: 21px

}

.mobile-nav {

    display: none

}

.hero {

    min-height: 650px;

    background: var(--cream);

    display: grid;

    grid-template-columns: 1fr 1fr;

    overflow: hidden

}

.hero-copy {

    padding: 95px 8% 100px max(8%, calc((100vw - 1190px)/2));

    display: flex;

    align-items: flex-start;

    justify-content: center;

    flex-direction: column

}

.eyebrow {

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .25em;

    color: var(--gold);

    font-weight: 700

}

.hero h1 {

    font-size: clamp(65px, 7vw, 114px);

    line-height: .94;

    margin: 23px 0 26px;

    letter-spacing: -.025em

}

.hero p {

    font-size: 14px;

    line-height: 1.9;

    max-width: 400px;

    color: var(--muted)

}

.buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 25px

}

.btn {

    border: 1px solid var(--ink);

    background: var(--ink);

    color: white;

    padding: 15px 22px;

    font-size: 11px;

    letter-spacing: .1em;

    text-transform: uppercase;

    font-weight: 700;

    transition: transform .25s, background .25s

}

.btn:hover {

    transform: translateY(-2px);

    background: #4d4842

}

.btn.alt {

    background: transparent;

    color: var(--ink)

}

.btn.alt:hover {

    background: white

}

.hero-art {

    position: relative;

    min-height: 650px;

    background: radial-gradient(circle at 52% 45%, #fff 0%, #eee9df 52%, #e3ded5 100%);

    overflow: hidden

}

.hero-art:before {

    content: '';

    position: absolute;

    width: 75%;

    height: 65%;

    top: 8%;

    left: 14%;

    border: 1px solid #ffffffb5;

    border-radius: 50%;

    transform: rotate(-27deg)

}

.hero-art:after {

    content: '';

    position: absolute;

    width: 76%;

    height: 76%;

    top: 5%;

    left: 12%;

    background: radial-gradient(circle, #fff8 0%, transparent 66%);

    pointer-events: none

}

.hero-art .visual-set {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    transform: rotate(-8deg)

}

.hero-art .visual-set .atomizer:nth-child(1) {

    transform: translateY(75px) rotate(-12deg) scale(.9)

}

.hero-art .visual-set .atomizer:nth-child(2) {

    transform: translateY(-30px) scale(1.18)

}

.hero-art .visual-set .atomizer:nth-child(3) {

    transform: translateY(80px) rotate(11deg) scale(.85)

}

.atomizer {

    width: 110px;

    height: 295px;

    position: relative;

    filter: drop-shadow(12px 26px 18px #4e423329);

    flex: none

}

.atomizer .top {

    position: absolute;

    width: 47%;

    height: 24%;

    left: 26.5%;

    top: 0;

    border-radius: 5px 5px 2px 2px;

    background: linear-gradient(90deg, #18191a, #565657 40%, #171819 70%, #393a3b)

}

.atomizer .neck {

    position: absolute;

    top: 21%;

    left: 34%;

    width: 32%;

    height: 12%;

    background: linear-gradient(90deg, #b7a07c, #f5e4c3, #aa8b5d)

}

.atomizer .glass {

    position: absolute;

    bottom: 0;

    left: 10%;

    width: 80%;

    height: 72%;

    border-radius: 12px 12px 14px 14px;

    border: 2px solid #ffffffbb;

    background: linear-gradient(90deg, #e0cfa8b3 0%, #fffdf6d9 25%, #d7bb82a6 75%, #f6eee0a8 100%);

    box-shadow: inset 9px 0 12px #ffffffaa, inset -8px 0 13px #ad9a7959

}

.atomizer .label {

    position: absolute;

    left: 15%;

    top: 41%;

    width: 70%;

    height: 26%;

    display: grid;

    place-content: center;

    text-align: center;

    background: #fffdf2ed;

    border: 1px solid #e3d8c5;

    box-shadow: 0 2px 7px #0001

}

.atomizer .label strong {

    font-size: 9px;

    letter-spacing: .1em

}

.atomizer .label small {

    font-size: 6px;

    letter-spacing: .13em;

    margin-top: 7px

}

.hero-note {

    position: absolute;

    bottom: 35px;

    right: 35px;

    z-index: 2;

    font-size: 10px;

    letter-spacing: .16em;

    color: #6e6254;

    text-transform: uppercase

}

.container {

    max-width: 1240px;

    margin: auto;

    padding: 0 28px

}

.section {

    padding: 110px 0

}

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 25px;

    margin-bottom: 37px

}

.section h2 {

    font-size: clamp(42px, 5vw, 72px);

    line-height: 1;

    margin: 12px 0 0

}

.section-heading p {

    color: var(--muted);

    font-size: 13px;

    max-width: 350px;

    line-height: 1.8

}

.value-strip {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-bottom: 1px solid var(--line);

    background: #fff

}

.value-strip div {

    text-align: center;

    padding: 24px 15px;

    border-right: 1px solid var(--line)

}

.value-strip div:last-child {

    border: 0

}

.value-strip strong {

    display: block;

    font-size: 12px

}

.value-strip span {

    display: block;

    color: var(--muted);

    font-size: 11px;

    margin-top: 6px

}

.filters {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 30px

}

.chip {

    border: 1px solid var(--line);

    background: white;

    padding: 11px 17px;

    border-radius: 40px;

    font-size: 12px

}

.chip.active {

    background: var(--ink);

    color: white;

    border-color: var(--ink)

}

.search {

    margin-left: auto;

    min-width: 220px;

    border: 1px solid var(--line);

    padding: 11px 15px;

    border-radius: 40px;

    outline: none

}

.products {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px

}

.product {

    border: 1px solid var(--line);

    background: white;

    overflow: hidden;

    transition: box-shadow .3s, transform .3s

}

.product:hover {

    box-shadow: var(--shadow);

    transform: translateY(-4px)

}

.product-visual {

    height: 360px;

    display: grid;

    place-items: center;

    position: relative;

    background: radial-gradient(circle at 50% 32%, #fff, #f1eee8 72%);

    overflow: hidden

}

.product-visual[data-tone=black] {

    background: radial-gradient(circle at 50% 32%, #fafafa, #e8e9e9 72%)

}

.product-visual[data-tone=coffee] {

    background: radial-gradient(circle at 50% 32%, #fff9f2, #eee5da 72%)

}

.product-visual .atomizer {

    transform: scale(.82);

    transition: transform .5s

}

.product:hover .atomizer {

    transform: scale(.9) translateY(-6px)

}

.product-visual .pill {

    position: absolute;

    top: 16px;

    left: 16px;

    background: white;

    padding: 9px 12px;

    font-size: 10px;

    letter-spacing: .08em;

    text-transform: uppercase

}

.product-info {

    padding: 25px

}

.product-info .maker {

    font-size: 10px;

    color: var(--gold);

    letter-spacing: .17em;

    text-transform: uppercase;

    font-weight: 700

}

.product-info h3 {

    font-family: Italiana, Georgia, serif;

    font-size: 30px;

    font-weight: 400;

    margin: 9px 0 8px

}

.product-info p {

    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;

    min-height: 40px

}

.sizes {

    display: flex;

    gap: 7px;

    margin: 18px 0 14px

}

.size {

    padding: 10px 13px;

    border: 1px solid var(--line);

    background: white;

    font-size: 12px

}

.size.selected {

    background: var(--ink);

    color: white;

    border-color: var(--ink)

}

.purchase {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    margin: 16px 0

}

.purchase strong {

    font-size: 18px

}

.stock {

    font-size: 11px;

    color: #6b7563

}

.stock.out {

    color: #9c6057

}

.product-info .btn {

    width: 100%

}

.product-info .btn:disabled {

    background: #bdbab4;

    border-color: #bdbab4;

    cursor: not-allowed;

    transform: none

}

.disclaimer {

    font-size: 11px;

    color: var(--muted);

    line-height: 1.7;

    margin-top: 20px

}

.story {

    background: #f7f5f0;

    padding: 100px 0

}

.story-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center

}

.story-art {

    height: 450px;

    display: grid;

    place-items: center;

    background: radial-gradient(circle, #fff 5%, #eae2d6 75%);

    position: relative;

    overflow: hidden

}

.story-art .atomizer {

    transform: rotate(-13deg) scale(1.14)

}

.story-art:after {

    content: 'EL ARTE DE DESCUBRIR';

    position: absolute;

    bottom: 25px;

    letter-spacing: .2em;

    font-size: 10px;

    color: #776a5a

}

.story h2 {

    font-size: clamp(44px, 5vw, 75px);

    line-height: 1.06;

    margin: 20px 0

}

.story p {

    font-size: 14px;

    color: var(--muted);

    line-height: 2;

    max-width: 460px

}

.footer {

    background: #252420;

    color: #eeeae3;

    padding: 60px 0 35px

}

.footer-inner {

    display: flex;

    justify-content: space-between;

    gap: 40px

}

.footer p {

    font-size: 12px;

    color: #bbb7ae;

    line-height: 1.8;

    max-width: 390px

}

.footer a {

    font-size: 12px;

    color: #eeeae3

}

.footer-bottom {

    border-top: 1px solid #55514a;

    margin-top: 55px;

    padding-top: 22px;

    font-size: 10px;

    color: #aaa69e

}

.overlay {

    position: fixed;

    inset: 0;

    background: #0006;

    z-index: 30;

    opacity: 0;

    visibility: hidden;

    transition: .25s

}

.overlay.open {

    opacity: 1;

    visibility: visible

}

.drawer {

    position: fixed;

    right: 0;

    top: 0;

    height: 100dvh;

    width: min(460px, 100%);

    background: white;

    z-index: 31;

    transform: translateX(105%);

    transition: transform .35s;

    display: flex;

    flex-direction: column;

    box-shadow: -10px 0 40px #0002

}

.drawer.open {

    transform: translateX(0)

}

.drawer-head {

    padding: 25px;

    border-bottom: 1px solid var(--line);

    display: flex;

    justify-content: space-between;

    align-items: center

}

.drawer-head h2 {

    font-size: 32px;

    margin: 0

}

.close {

    border: 0;

    background: none;

    font-size: 28px

}

.drawer-items {

    padding: 22px;

    flex: 1;

    overflow: auto

}

.cart-item {

    display: grid;

    grid-template-columns: 65px 1fr auto;

    gap: 14px;

    padding: 17px 0;

    border-bottom: 1px solid var(--line)

}

.mini-visual {

    height: 85px;

    background: #f3efe7;

    display: grid;

    place-items: center

}

.mini-visual .atomizer {

    transform: scale(.23);

    transform-origin: center

}

.cart-item strong {

    font-size: 13px

}

.cart-item p {

    font-size: 11px;

    color: var(--muted);

    margin: 6px 0

}

.qty {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 12px

}

.qty button {

    border: 1px solid var(--line);

    background: white;

    width: 27px;

    height: 27px

}

.remove {

    border: 0;

    background: none;

    color: #8c6d59;

    font-size: 11px;

    align-self: start

}

.drawer-foot {

    padding: 24px;

    border-top: 1px solid var(--line)

}

.total {

    display: flex;

    justify-content: space-between;

    margin-bottom: 20px

}

.drawer-foot .btn {

    width: 100%

}

.empty {

    text-align: center;

    color: var(--muted);

    margin-top: 60px;

    font-size: 13px;

    line-height: 1.8

}

.toast {

    position: fixed;

    bottom: 25px;

    left: 50%;

    transform: translate(-50%, 120px);

    background: #282622;

    color: white;

    padding: 14px 20px;

    font-size: 12px;

    z-index: 40;

    transition: transform .3s;

    box-shadow: var(--shadow)

}

.toast.show {

    transform: translate(-50%, 0)

}

.mobile-bottom {

    display: none

}

.admin-body {

    background: #f7f6f2

}

.admin-shell {

    max-width: 1120px;

    margin: 0 auto;

    padding: 50px 22px 90px

}

.admin-top {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    align-items: center

}

.admin-top h1 {

    font-size: 52px;

    margin: 8px 0

}

.admin-note {

    background: #fff9ec;

    border: 1px solid #e9d7ae;

    padding: 18px 22px;

    color: #655337;

    font-size: 13px;

    line-height: 1.8;

    margin: 22px 0

}

.admin-tools {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin: 28px 0

}

.admin-tools .btn {

    padding: 12px 16px

}

.admin-card {

    background: white;

    border: 1px solid var(--line);

    padding: 24px;

    margin-bottom: 16px

}

.admin-card h2 {

    font-size: 27px;

    margin: 0 0 8px

}

.admin-card p {

    font-size: 12px;

    color: var(--muted)

}

.admin-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-top: 20px

}

.field {

    display: flex;

    flex-direction: column;

    gap: 7px

}

.field label {

    font-size: 11px;

    color: var(--muted)

}

.field input {

    border: 1px solid var(--line);

    padding: 12px;

    width: 100%;

    border-radius: 0

}

.admin-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 22px

}

.status {

    font-size: 12px;

    color: #6c7a5b

}

.hidden {

    display: none !important

}

@media(max-width:900px) {

    .navlinks {

        gap: 16px

    }

    .hero {

        grid-template-columns: 1fr 1fr;

        min-height: 560px

    }

    .hero-copy {

        padding: 60px 8%

    }

    .hero-art {

        min-height: 560px

    }

    .hero-art .visual-set {

        transform: scale(.8) rotate(-8deg)

    }

    .products {

        gap: 12px

    }

    .product-visual {

        height: 300px

    }

    .product-info {

        padding: 18px

    }

    .story-grid {

        gap: 35px

    }

    .admin-grid {

        grid-template-columns: repeat(2, 1fr)

    }

}

@media(max-width:650px) {

    html {

        scroll-padding-top: 75px

    }

    .announce {

        font-size: 9px

    }

    .nav {

        height: 65px;

        padding: 0 18px

    }

    .brand {

        font-size: 13px

    }

    .brand small {

        font-size: 7px

    }

    .navlinks {

        display: none

    }

    .menu-button {

        display: block

    }

    .mobile-nav {

        display: none;

        background: white;

        padding: 15px 20px;

        border-top: 1px solid var(--line)

    }

    .mobile-nav.open {

        display: flex;

        flex-direction: column;

        gap: 18px

    }

    .mobile-nav a {

        font-size: 13px

    }

    .hero {

        display: flex;

        flex-direction: column;

        min-height: auto

    }

    .hero-copy {

        padding: 62px 24px 50px;

        order: 1

    }

    .hero h1 {

        font-size: clamp(60px, 15vw, 82px);

        margin: 18px 0

    }

    .hero p {

        font-size: 13px

    }

    .hero-art {

        order: 0;

        min-height: 340px;

        height: 340px

    }

    .hero-art .visual-set {

        transform: scale(.69) rotate(-8deg)

    }

    .hero-note {

        bottom: 15px;

        right: 15px;

        font-size: 8px

    }

    .buttons {

        margin-top: 20px

    }

    .btn {

        padding: 14px 17px

    }

    .value-strip {

        grid-template-columns: repeat(3, 1fr)

    }

    .value-strip div {

        padding: 18px 7px

    }

    .value-strip strong {

        font-size: 10px

    }

    .value-strip span {

        font-size: 9px

    }

    .container {

        padding: 0 18px

    }

    .section {

        padding: 75px 0

    }

    .section-heading {

        display: block;

        margin-bottom: 25px

    }

    .section h2 {

        font-size: 49px

    }

    .section-heading p {

        margin-top: 17px

    }

    .filters {

        gap: 7px

    }

    .search {

        width: 100%;

        margin-left: 0

    }

    .products {

        grid-template-columns: 1fr;

        gap: 18px

    }

    .product {

        display: grid;

        grid-template-columns: 40% 60%;

        min-height: 250px

    }

    .product-visual {

        height: 100%;

        min-height: 260px

    }

    .product-visual .atomizer {

        transform: scale(.54)

    }

    .product:hover .atomizer {

        transform: scale(.54)

    }

    .product-visual .pill {

        font-size: 8px;

        top: 10px;

        left: 9px;

        padding: 6px

    }

    .product-info {

        padding: 16px 14px

    }

    .product-info h3 {

        font-size: 25px

    }

    .product-info p {

        min-height: 0;

        font-size: 11px;

        margin: 7px 0

    }

    .sizes {

        gap: 5px;

        margin: 11px 0

    }

    .size {

        padding: 8px;

        font-size: 11px

    }

    .purchase {

        margin: 10px 0

    }

    .purchase strong {

        font-size: 15px

    }

    .stock {

        font-size: 10px

    }

    .product-info .btn {

        font-size: 9px;

        padding: 12px 5px

    }

    .story {

        padding: 75px 0

    }

    .story-grid {

        grid-template-columns: 1fr;

        gap: 30px

    }

    .story-art {

        height: 330px

    }

    .story-art .atomizer {

        transform: rotate(-13deg) scale(.9)

    }

    .story h2 {

        font-size: 50px

    }

    .footer {

        padding-bottom: 95px

    }

    .footer-inner {

        display: block

    }

    .footer-inner>div+div {

        margin-top: 25px

    }

    .mobile-bottom {

        position: fixed;

        bottom: 0;

        left: 0;

        right: 0;

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        height: 64px;

        background: #fffc;

        border-top: 1px solid var(--line);

        z-index: 19;

        backdrop-filter: blur(15px)

    }

    .mobile-bottom a,

    .mobile-bottom button {

        display: grid;

        place-items: center;

        align-content: center;

        gap: 5px;

        border: 0;

        background: transparent;

        font-size: 10px;

        color: var(--ink)

    }

    .mobile-bottom span {

        font-size: 20px

    }

    .toast {

        bottom: 78px

    }

    .admin-shell {

        padding: 30px 14px 90px

    }

    .admin-top h1 {

        font-size: 36px

    }

    .admin-grid {

        grid-template-columns: 1fr 1fr;

        gap: 10px

    }

    .admin-card {

        padding: 16px

    }

    .admin-tools .btn {

        font-size: 9px

    }

    .admin-top {

        align-items: start

    }

    .admin-top .btn {

        font-size: 9px;

        padding: 11px

    }

    .drawer {

        padding-bottom: 0

    }

}

@media(prefers-reduced-motion:reduce) {

    *,

    *:before,

    *:after {

        scroll-behavior: auto !important;

        animation: none !important;

        transition: none !important

    }

}

/* V7: fotos, panel flexible y responsive */

.brand-filters {

    display: contents

}

.photo-pair {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    padding: 28px

}

.photo-pair .bottle-photo {

    width: 78%;

    height: 90%;

    object-fit: contain;

    filter: drop-shadow(0 18px 15px #34271922)

}

.photo-pair .decant-photo {

    position: absolute;

    right: 2%;

    bottom: 6%;

    width: 33%;

    height: 51%;

    object-fit: contain;

    filter: drop-shadow(0 10px 12px #34271925)

}

.photo-pair .atomizer {

    transform: scale(.82)

}

.product:hover .photo-pair .atomizer {

    transform: scale(.9)

}

.admin-card-top,

.admin-card-actions,

.variant-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap

}

.admin-card-actions {

    gap: 12px

}

.publish {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    font-weight: 600

}

.publish input {

    accent-color: #86704d;

    width: 17px;

    height: 17px

}

.admin-details {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 25px

}

.admin-details .full {

    grid-column: 1/-1

}

.field textarea {

    border: 1px solid var(--line);

    padding: 12px;

    resize: vertical;

    width: 100%;

    font: inherit

}

.admin-photos {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin: 22px 0

}

.image-field {

    border: 1px solid var(--line);

    padding: 16px;

    display: flex;

    flex-direction: column;

    gap: 10px

}

.image-field>label {

    font-size: 12px;

    font-weight: 700

}

.image-field input {

    max-width: 100%;

    font-size: 11px

}

.image-preview {

    height: 170px;

    background: #f7f6f2;

    display: grid;

    place-items: center;

    color: var(--muted);

    font-size: 12px

}

.image-preview img {

    width: 100%;

    height: 100%;

    object-fit: contain

}

.link-button {

    border: 0;

    background: none;

    color: #7c5d44;

    text-decoration: underline;

    font-size: 12px;

    cursor: pointer

}

.variant-title {

    margin: 26px 0 14px

}

.variant-title strong {

    font-size: 14px

}

.variant-list {

    display: grid;

    gap: 10px

}

.variant-row {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr auto;

    align-items: end;

    gap: 12px;

    padding: 12px;

    background: #f8f7f4

}

.variant-row .link-button {

    margin-bottom: 12px

}

.admin-count {

    font-size: 12px;

    color: var(--muted)

}

@media(max-width:650px) {

    .admin-details,

    .admin-photos {

        grid-template-columns: 1fr

    }

    .variant-row {

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 6px

    }

    .variant-row .field input {

        padding: 9px 5px;

        font-size: 12px

    }

    .variant-row .link-button {

        grid-column: 1/-1;

        justify-self: start;

        margin: 0

    }

    .image-preview {

        height: 180px

    }

    .product-visual .photo-pair .atomizer {

        transform: scale(.54)

    }

    .product:hover .photo-pair .atomizer {

        transform: scale(.54)

    }

    .photo-pair {

        padding: 10px

    }

    .photo-pair .bottle-photo {

        width: 96%

    }

    .photo-pair .decant-photo {

        width: 42%;

        right: -3%

    }

}


/* =====================================================
   Ajustes finales: composición editorial y pie de página
   ===================================================== */

/* Contenedor consistente sin duplicar padding horizontal */
.container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(18px, 3vw, 28px);
}

.section-heading {
    align-items: flex-end;
    gap: 32px;
}

.section-heading h2 {
    line-height: 1.1;
    text-wrap: balance;
}

.hero-copy,
.story-grid > div {
    min-width: 0;
}

.hero-copy p,
.section-heading p,
.story-content p {
    text-align: left;
    line-height: 1.8;
    text-wrap: pretty;
}

.story-grid {
    gap: clamp(36px, 6vw, 90px);
    align-items: center;
}

/* Se aplica con o sin la clase story-content en index.html */
.story-grid > div:last-child,
.story-content {
    width: 100%;
    min-width: 0;
    max-width: 540px;
}

.story-grid h2,
.story-content h2 {
    max-width: 540px;
    font-size: clamp(38px, 4.2vw, 60px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin: 16px 0 26px;
    text-wrap: balance;
}

.story-grid p,
.story-content p {
    max-width: 480px;
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.85;
    text-align: left;
}

.story-grid .btn,
.story-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}

/* Footer: información legal a la izquierda y autoría a la derecha */
.footer-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    border-top: 1px solid rgba(255,255,255,.15);
    margin-top: 48px;
    padding-top: 28px;
    text-align: left;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.6;
}

.footer-disclaimer {
    opacity: .65;
}

.developer-credit {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    flex: 0 1 auto;
    font-size: 11px;
    letter-spacing: .04em;
    line-height: 1.6;
    color: rgba(255,255,255,.7);
    text-align: right;
}

.developer-credit span,
.developer-credit a {
    color: #d6b88d;
    font-weight: 600;
}

@media (max-width: 768px) {
    .section-heading {
        align-items: flex-start;
        gap: 16px;
    }

    .story-grid {
        gap: 32px;
    }

    .story-grid h2,
    .story-content h2 {
        font-size: clamp(36px, 9vw, 48px);
    }

    .story-grid p,
    .story-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding-bottom: 30px;
    }

    .developer-credit {
        align-self: flex-end;
        font-size: 10px;
    }
}