@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
}

@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/lora-latin.woff2') format('woff2');
}

:root {
    color-scheme: light;
    --u: min(1vw, 14.4px);
    --paper: #fbf8f3;
    --ink: #151311;
    --brown: #805e4e;
    --wine: #432319;
    --line: #d8c6ba;
    --peach: #f4e6dc;
    --heading: "Cormorant Garamond", "Times New Roman", serif;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 16px;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 22% 16%, #fffdf9b0, transparent 58%), var(--paper); }
body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, input { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--heading); font-weight: 400; }
em { font-family: "Times New Roman", Georgia, serif; font-weight: 400; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--brown); outline-offset: 5px; }
::selection { background: #805e4e; color: white; }
[hidden] { display: none !important; }
.site-shell { max-width: 1440px; margin-inline: auto; overflow: clip; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; transform: translateY(-200%); padding: .8rem 1rem; background: var(--brown); color: white; }
.skip-link:focus { transform: none; }
#contenido:focus { outline: none; }
.eyebrow { display: flex; align-items: center; gap: calc(var(--u) * 2.2); font-size: calc(var(--u) * 1.1); line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: var(--wine); }
.eyebrow > span { height: 1px; width: calc(var(--u) * 6.7); background: #bda090; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.7); min-height: calc(var(--u) * 4); padding: calc(var(--u) * .9) calc(var(--u) * 2.4); border: 1px solid #a38a7b; border-radius: 6px; color: #fffaf4; background: linear-gradient(110deg, #82604e, #8d6b59 65%, #7a5949); font-size: calc(var(--u) * 1.65); line-height: 1.25; transition: background .2s, box-shadow .2s, transform .2s; }
.button:hover { background: #684938; box-shadow: 0 4px 14px #5532241c; transform: translateY(-1px); }
.button .icon { width: 1em; height: 1em; }
.text-link { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.3); width: fit-content; border-bottom: 1px solid #b49686; padding-bottom: .13em; color: var(--wine); font-size: calc(var(--u) * 1.55); line-height: 1.35; }
.text-link .icon { color: #a17d69; width: 1em; height: 1em; }
.text-link:hover { color: #9a715d; }
.foliage { position: absolute; pointer-events: none; color: #c3a18a; width: calc(var(--u) * 22); height: calc(var(--u) * 35); opacity: .55; }
.section-pad { padding-inline: calc(var(--u) * 7.4); }

.site-header { position: relative; display: flex; align-items: center; height: calc(var(--u) * 10.8); gap: calc(var(--u) * 4.5); padding-inline: calc(var(--u) * 7.4) calc(var(--u) * 5.4); border-bottom: 1px solid #d7c7bc80; background-image: linear-gradient(90deg, #fbf8f300 70%, #fbf8f310), url('../images/public/shared/detalle-salon.jpg'); background-position: right; background-size: auto 100%; background-repeat: no-repeat; }
.brand { display: inline-flex; flex-direction: column; align-items: center; width: max-content; flex-shrink: 0; }
.brand__symbol { width: calc(var(--u) * 3.7); height: calc(var(--u) * 4); margin-bottom: calc(var(--u) * -.12); stroke: var(--brown); stroke-width: 1.2; fill: none; }
.brand__name { font-family: var(--heading); text-transform: uppercase; font-size: calc(var(--u) * 4.1); line-height: .95; letter-spacing: .015em; }
.brand__tagline { font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: .4em; font-size: calc(var(--u) * .72); margin-top: calc(var(--u) * .6); }
.site-nav { display: flex; align-items: center; gap: calc(var(--u) * 5); margin-left: auto; }
.site-nav a { font-size: calc(var(--u) * 1.6); white-space: nowrap; padding-block: .8rem; }
.site-nav a:hover { color: var(--brown); }
.button--header { margin-left: calc(var(--u) * 5.6); border: 1px solid #fff8ed; min-height: calc(var(--u) * 4.2); padding-inline: calc(var(--u) * 2.3); font-size: calc(var(--u) * 1.55); gap: calc(var(--u) * 1); white-space: nowrap; box-shadow: 0 0 0 1px #805e4e50; }
.menu-toggle { display: none; }

.hero { display: grid; grid-template-columns: 45.3% 54.7%; min-height: calc(var(--u) * 51); }
.hero__copy { position: relative; padding: calc(var(--u) * 6.3) 0 calc(var(--u) * 4) calc(var(--u) * 7.4); }
.hero__copy > :not(.foliage) { position: relative; z-index: 1; }
.hero h1 { margin-top: calc(var(--u) * 2.5); font-size: calc(var(--u) * 7.6); line-height: .79; letter-spacing: -.055em; white-space: nowrap; }
.hero h1 em { display: inline-block; color: var(--wine); font-size: .8em; line-height: .96; letter-spacing: -.065em; }
.hero__intro { margin-top: calc(var(--u) * 2); font-family: var(--heading); font-size: calc(var(--u) * 2.65); line-height: 1.02; }
.button--hero { min-height: calc(var(--u) * 5.3); width: calc(var(--u) * 26); margin-top: calc(var(--u) * 2.5); padding-inline: calc(var(--u) * 2.2); font-size: calc(var(--u) * 2.05); gap: calc(var(--u) * 2); }
.hero__explore { display: flex; margin-top: calc(var(--u) * 2); color: var(--ink); font-size: calc(var(--u) * 1.8); }
.hero__explore .icon { color: var(--brown); }
.hero__image { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.hero__picture { display: block; min-width: 0; min-height: 0; }
.foliage--hero { left: calc(var(--u) * -6); bottom: calc(var(--u) * -3); transform: rotate(6deg); opacity: .6; }
.visit-strip { display: flex; align-items: center; justify-content: center; min-height: calc(var(--u) * 5.4); border-block: 1px solid #ddcfc4b0; font-size: calc(var(--u) * 1.75); }
.visit-strip > * { display: flex; align-items: center; gap: calc(var(--u) * 1.5); padding-inline: calc(var(--u) * 4.1); }
.visit-strip > :last-child { border-left: 1px solid #cfb7a7; }
.visit-strip .icon { color: var(--brown); }

.services { padding-top: calc(var(--u) * 2.4); padding-bottom: calc(var(--u) * 1.8); }
.services h2 { text-align: center; font-size: calc(var(--u) * 4.65); line-height: 1.2; letter-spacing: -.025em; }
.services h2 em { font-size: .86em; color: var(--wine); letter-spacing: -.04em; }
.services__intro { text-align: center; margin-top: calc(var(--u) * .7); color: #665044; font-size: calc(var(--u) * 1.55); line-height: 1.4; }
.section-rule { display: block; width: calc(var(--u) * 5.3); height: 1px; margin: calc(var(--u) * 1.05) auto; background: var(--line); }
.services__grid { display: grid; grid-template-columns: 32% 36.3% 31.7%; }
.service { display: flex; flex-direction: column; padding-inline: calc(var(--u) * 3.7); border-right: 1px solid var(--line); }
.service:first-child { padding-left: 0; padding-right: calc(var(--u) * 5.5); }
.service:last-child { padding-left: calc(var(--u) * 4); padding-right: 0; border-right: 0; }
.service__number { display: block; border-bottom: 1px solid var(--line); padding-bottom: calc(var(--u) * .5); color: #ad8770; font-family: var(--heading); font-size: calc(var(--u) * 2.2); font-style: italic; line-height: 1; }
.service h3 { margin-top: calc(var(--u) * 1.1); font-size: calc(var(--u) * 3.25); line-height: 1; letter-spacing: -.06em; white-space: nowrap; }
.service p { max-width: 27ch; margin-top: calc(var(--u) * 1.1); font-size: calc(var(--u) * 1.8); line-height: 1.2; }
.service .text-link { margin-top: auto; padding-top: calc(var(--u) * 2); }

.promotion { position: relative; display: grid; grid-template-columns: 46% 54%; min-height: calc(var(--u) * 24.7); padding: calc(var(--u) * 2.8) calc(var(--u) * 14) calc(var(--u) * 1.8) calc(var(--u) * 19); background: radial-gradient(ellipse at 25% 35%, #fff8f3a0, transparent 55%), var(--peach); overflow: hidden; }
.promotion__intro, .promotion__offer { position: relative; z-index: 1; }
.promotion__intro { padding-right: calc(var(--u) * 3.5); }
.promotion h2 { margin-top: calc(var(--u) * 1.3); font-size: calc(var(--u) * 5.4); line-height: .92; letter-spacing: -.045em; white-space: nowrap; }
.promotion h2 em { font-size: .9em; color: var(--wine); letter-spacing: -.055em; }
.promotion__intro > p:last-child { margin-top: calc(var(--u) * 1.2); font-family: var(--heading); font-size: calc(var(--u) * 2.6); line-height: 1.04; }
.promotion__intro > p:last-child em { font-size: .88em; }
.promotion__offer { align-self: center; text-align: center; border-left: 1px solid #d0b9a8; padding-left: calc(var(--u) * 3); }
.promotion__discount { font-family: var(--heading); font-size: calc(var(--u) * 10.1); line-height: .76; letter-spacing: -.07em; color: var(--wine); white-space: nowrap; }
.promotion__subtitle { margin-top: calc(var(--u) * .4); font-family: var(--heading); font-size: calc(var(--u) * 3.05); line-height: 1.2; }
.promotion__subtitle em { font-size: .9em; }
.promotion .button { margin-top: calc(var(--u) * .8); padding-inline: calc(var(--u) * 3.1); }
.promotion__terms { margin-top: calc(var(--u) * .85); font-family: var(--heading); font-size: calc(var(--u) * 1.27); line-height: 1.35; color: #644e40; white-space: nowrap; }
.foliage--promotion-left { width: calc(var(--u) * 21); height: calc(var(--u) * 33); left: calc(var(--u) * -2); bottom: calc(var(--u) * -4); }
.foliage--promotion-right { width: calc(var(--u) * 21); height: calc(var(--u) * 32); right: calc(var(--u) * -3); top: calc(var(--u) * -1); transform: scaleX(-1) rotate(8deg); }

.space { display: grid; grid-template-columns: 49.5% 50.5%; gap: 0; padding: calc(var(--u) * 1.3) calc(var(--u) * 3.9) calc(var(--u) * 1); }
.space > picture { display: block; height: calc(var(--u) * 27.1); }
.space > picture > img { width: 100%; height: 100%; object-fit: cover; }
.space__copy { position: relative; padding: calc(var(--u) * 1) 0 0 calc(var(--u) * 4.7); }
.space__copy > :not(.foliage) { position: relative; z-index: 1; }
.space .eyebrow { font-size: calc(var(--u) * 1.05); gap: calc(var(--u) * 1.8); }
.space h2 { font-size: calc(var(--u) * 6.4); letter-spacing: -.055em; line-height: .81; margin-top: calc(var(--u) * 1.25); }
.space h2 em { display: inline-block; font-size: .89em; letter-spacing: -.065em; color: var(--wine); line-height: .95; }
.space__copy > p:not(.eyebrow) { margin-top: calc(var(--u) * 1.2); font-family: var(--heading); font-size: calc(var(--u) * 1.88); line-height: 1.08; }
.space .text-link { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 1.4); gap: .4em; }
.foliage--space { width: calc(var(--u) * 19); height: calc(var(--u) * 30); right: calc(var(--u) * -9); bottom: calc(var(--u) * -1); transform: scaleX(-1) rotate(-14deg); opacity: .4; }

.contact { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(var(--u) * 9.4); gap: calc(var(--u) * 6.5); background: radial-gradient(ellipse at 50% 50%, #fff9f3a0, transparent 70%), #ecd9c9; overflow: hidden; }
.contact::before, .contact::after { content: ''; position: absolute; width: calc(var(--u) * 28); height: calc(var(--u) * 17); border: 1px solid #b89479a0; border-radius: 50%; pointer-events: none; }
.contact::before { left: calc(var(--u) * -16); top: calc(var(--u) * 2); transform: rotate(30deg); }
.contact::after { right: calc(var(--u) * -7); top: calc(var(--u) * 2.5); transform: rotate(-28deg); }
.contact__brand { display: flex; align-items: center; gap: calc(var(--u) * 2.2); }
.contact__symbol { width: calc(var(--u) * 8); height: calc(var(--u) * 8.2); fill: none; stroke: var(--brown); stroke-width: 1.35; }
.contact__brand .eyebrow { letter-spacing: .36em; font-size: calc(var(--u) * 1.05); }
.contact h2 { font-size: calc(var(--u) * 7.3); letter-spacing: -.05em; line-height: .85; }
.contact__actions { display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding-left: calc(var(--u) * 3.4); border-left: 1px solid #a98a75; }
.contact__actions .button { min-height: calc(var(--u) * 3.8); font-size: calc(var(--u) * 1.6); }
.contact__instagram { display: flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 1.7); }
.contact__instagram .icon { width: 1.3em; height: 1.3em; color: #6f4a35; }
.site-footer { display: flex; align-items: center; min-height: calc(var(--u) * 5.1); padding: calc(var(--u) * .6) calc(var(--u) * 5.1); gap: calc(var(--u) * 7.6); }
.brand--footer .brand__name { font-size: calc(var(--u) * 2.85); }
.brand--footer .brand__tagline { font-size: calc(var(--u) * .48); margin-top: calc(var(--u) * .35); }
.site-footer nav { display: flex; align-items: center; gap: calc(var(--u) * 3.4); font-size: calc(var(--u) * 1.2); white-space: nowrap; }
.site-footer > p { border-left: 1px solid #bea390; padding-left: calc(var(--u) * 3.3); margin-left: auto; font-size: calc(var(--u) * 1.15); line-height: 1.35; white-space: nowrap; }
.floating-contact { position: fixed; right: max(24px, calc((100vw - 1440px) / 2 + 24px)); bottom: 28px; z-index: 5; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: white; background: var(--brown); box-shadow: 0 4px 16px #54372c38; transition: background .2s, transform .2s; }
.floating-contact .icon { width: 25px; height: 25px; }
.floating-contact:hover { background: #604331; transform: translateY(-2px); }

.detail-dialog { width: min(550px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 42px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--ink); box-shadow: 0 16px 90px #25170e40; }
.detail-dialog::backdrop { background: #21160fb0; backdrop-filter: blur(3px); }
.detail-dialog .eyebrow { font-size: 10px; padding-right: 16px; }
.detail-dialog h2 { font-size: 44px; line-height: 1; letter-spacing: -.03em; margin-block: 18px; }
.detail-dialog > p:not(.eyebrow) { font-size: 16px; line-height: 1.6; margin-block: 18px; }
.detail-dialog ul { margin-block: 20px; padding-left: 20px; font-size: 15px; line-height: 1.8; }
.detail-dialog .button { min-height: 44px; font-size: 15px; padding: 12px 20px; gap: 14px; }
.detail-dialog .dialog-terms { font-size: 13px !important; color: #785e4e; }
.dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; }
.dialog-close:hover { background: var(--peach); }
.dialog-photo { width: 100%; height: auto; }
html:not(.js) .detail-dialog { display: block; position: static; margin: 24px auto; }
html:not(.js) .dialog-close { display: none; }
.error-page { padding: 90px 8%; min-height: 60vh; }
.error-page h1 { font-size: 52px; margin-block: 20px; }
.error-page .eyebrow { font-size: 12px; }
.error-page .text-link { font-size: 16px; }

@media (min-width: 701px) and (max-width: 850px) {
    .site-header { gap: calc(var(--u) * 3); }
    .site-nav { gap: calc(var(--u) * 3.5); }
    .button--header { margin-left: calc(var(--u) * 3); }
}

@media (max-width: 700px) {
    :root { --u: 9.71px; }
    html { scroll-padding-top: 20px; }
    .site-header { height: 90px; padding-inline: 22px; gap: 14px; background-size: auto 100%; }
    .brand__symbol { width: 28px; height: 32px; }
    .brand__name { font-size: 32px; }
    .brand__tagline { font-size: 5.6px; margin-top: 5px; }
    .site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 18px; margin-left: auto; }
    .site-nav a { font-size: 13px; padding-block: 8px; }
    .site-header:has(.menu-toggle:not([hidden])) .site-nav { display: none; }
    .site-header:has(.menu-toggle:not([hidden])) .site-nav.is-open { display: flex; position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 10; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: 0 6px 12px #573a2612; }
    .site-nav.is-open a { font-size: 17px; padding: 14px 0; }
    html:not(.js) .site-header { height: auto; min-height: 90px; flex-wrap: wrap; padding-block: 12px; }
    html:not(.js) .site-nav { order: 3; width: 100%; margin-left: 0; }
    .button--header { min-height: 36px; margin-left: auto; padding: 9px 12px; font-size: 13px; gap: 9px; }
    .menu-toggle { display: flex; width: 36px; height: 40px; border: 0; padding: 10px 6px; flex-direction: column; justify-content: center; gap: 6px; background: transparent; }
    .menu-toggle span { display: block; height: 1px; width: 23px; background: var(--wine); transition: transform .2s; }
    .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero__copy { padding: 42px 26px 36px; }
    .hero .eyebrow { font-size: 10px; gap: 18px; }
    .hero .eyebrow > span { width: 52px; }
    .hero h1 { font-size: clamp(57px, 11vw, 76px); margin-top: 26px; }
    .hero h1 em { font-size: .8em; margin-top: 9px; }
    .hero__intro { font-size: 26px; margin-top: 23px; line-height: 1.1; }
    .button--hero { min-height: 49px; font-size: 19px; margin-top: 25px; padding-inline: 24px; }
    .hero__explore { font-size: 16px; margin-top: 21px; }
    .hero__image { height: clamp(320px, 90vw, 530px); object-position: center 45%; }
    .foliage--hero { width: 180px; height: 290px; left: auto; right: -72px; bottom: -36px; transform: scaleX(-1); opacity: .35; }
    .visit-strip { flex-direction: column; gap: 13px; padding: 19px 14px; font-size: 13px; }
    .visit-strip > * { gap: 12px; padding: 0; }
    .visit-strip > :last-child { border: 0; }
    .section-pad { padding-inline: 26px; }
    .services { padding-top: 32px; padding-bottom: 32px; }
    .services h2 { font-size: clamp(32px, 6.7vw, 42px); line-height: 1.12; }
    .services h2 em { display: block; font-size: .9em; margin-top: 5px; }
    .services__intro { margin-top: 14px; font-size: 15px; line-height: 1.5; }
    .section-rule { margin-block: 20px 28px; width: 50px; }
    .services__grid { grid-template-columns: 1fr; }
    .service, .service:first-child, .service:last-child { padding: 0 0 25px; margin-bottom: 25px; border-right: 0; border-bottom: 1px solid var(--line); }
    .service:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; }
    .service__number { font-size: 21px; width: 46px; padding-bottom: 6px; }
    .service h3 { font-size: 33px; margin-top: 12px; white-space: normal; }
    .service p { max-width: 35ch; font-size: 20px; margin-top: 10px; line-height: 1.2; }
    .service .text-link { padding-top: 17px; font-size: 15px; }
    .promotion { grid-template-columns: 1fr; min-height: 0; padding: 32px 26px 27px; text-align: center; gap: 28px; }
    .promotion__intro { padding: 0; }
    .promotion .eyebrow { justify-content: center; font-size: 10px; }
    .promotion h2 { font-size: 49px; margin-top: 17px; }
    .promotion__intro > p:last-child { font-size: 25px; margin-top: 15px; }
    .promotion__offer { border-left: 0; border-top: 1px solid #d0b9a8; padding: 28px 0 0; margin-inline: auto; width: 100%; max-width: 350px; }
    .promotion__discount { font-size: 88px; }
    .promotion__subtitle { font-size: 29px; margin-top: 5px; }
    .promotion .button { font-size: 16px; margin-top: 13px; min-height: 42px; padding-inline: 24px; }
    .promotion__terms { font-size: 11px; white-space: normal; margin-top: 13px; line-height: 1.45; }
    .foliage--promotion-left { left: -90px; bottom: -10px; width: 200px; height: 325px; opacity: .5; }
    .foliage--promotion-right { right: -100px; top: -20px; width: 180px; height: 300px; opacity: .5; }
    .space { grid-template-columns: 1fr; padding: 14px; }
    .space > picture { height: auto; }
    .space > picture > img { height: auto; aspect-ratio: 443 / 263; }
    .space__copy { padding: 28px 12px 22px; }
    .space .eyebrow { font-size: 9px; gap: 14px; }
    .space .eyebrow > span { width: 45px; }
    .space h2 { font-size: 61px; margin-top: 18px; }
    .space__copy > p:not(.eyebrow) { font-size: 20px; line-height: 1.2; margin-top: 20px; max-width: 34ch; }
    .desktop-break { display: none; }
    .space .text-link { font-size: 15px; margin-top: 18px; }
    .foliage--space { width: 165px; height: 270px; right: -90px; opacity: .4; }
    .contact { flex-direction: column; align-items: stretch; gap: 22px; padding: 26px; }
    .contact__brand { justify-content: center; gap: 18px; }
    .contact__symbol { width: 67px; height: 76px; }
    .contact__brand .eyebrow { font-size: 9px; }
    .contact h2 { font-size: 64px; }
    .contact__actions { align-items: center; padding: 19px 0 0; border-left: 0; border-top: 1px solid #b99d87; gap: 14px; }
    .contact__actions .button { font-size: 16px; min-height: 43px; padding-inline: 24px; }
    .contact__instagram { font-size: 16px; gap: 10px; }
    .site-footer { flex-wrap: wrap; justify-content: center; text-align: center; gap: 22px; padding: 27px 24px 75px; }
    .brand--footer .brand__name { font-size: 30px; }
    .brand--footer .brand__tagline { font-size: 5px; }
    .site-footer nav { justify-content: center; gap: 24px; font-size: 12px; width: 100%; }
    .site-footer > p { border: 0; padding: 0; margin: 0; font-size: 12px; line-height: 1.6; }
    .floating-contact { right: 18px; bottom: 18px; }
    .detail-dialog { padding: 32px 24px; }
    .detail-dialog h2 { font-size: 38px; padding-right: 8px; }
    .detail-dialog .button { font-size: 14px; }
    .error-page { padding: 60px 26px; }
}

@media (max-width: 380px) {
    .site-header { padding-inline: 16px; gap: 8px; }
    .site-header .brand__name { font-size: 28px; }
    .site-header .brand__tagline { font-size: 5px; }
    .button--header { padding: 8px 9px; font-size: 12px; gap: 7px; }
    .menu-toggle { width: 30px; padding-inline: 3px; }
}

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