/* HOMITI visual foundation — SYSTEM.md design tokens & components */
:root {
    color-scheme: light;
    --ink: #17211d;
    --muted: #66746d;
    --lead-color: #415049;
    --paper: #f7f4ed;
    --white: #ffffff;
    --forest: #143f37;
    --forest-dark: #0e302a;
    --sand: #e9dfcf;
    --gold: #c59b62;
    --line: rgba(23, 33, 29, 0.12);

    /* Backwards compatibility aliases */
    --color-ink: var(--ink);
    --color-muted: var(--muted);
    --color-paper: var(--paper);
    --color-surface: var(--white);
    --color-surface-soft: #eaece5;
    --color-line: var(--line);
    --color-accent: var(--forest);
    --color-accent-dark: var(--forest-dark);
    --color-accent-soft: #edf3f0;
    --color-olive: var(--forest);
    --color-success: #276b49;
    --color-error: #a23e38;

    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: Georgia, "Times New Roman", serif;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-pill: 999px;

    --shadow: 0 18px 50px rgba(20, 63, 55, 0.14);
    --shadow-card: var(--shadow);
    --shadow-float: 0 20px 65px rgba(26, 35, 29, 0.19);
    --focus-ring: 0 0 0 3px rgba(20, 63, 55, 0.25);
    --max-width: 1180px;

    --type-h1: clamp(3.1rem, 5vw, 4.5rem);
    --type-h2: clamp(2.25rem, 4vw, 3.5rem);
    --type-h3: 1.28rem;
    --type-lead: clamp(1rem, 1.25vw, 1.125rem);
    --type-body: 1rem;
    --type-ui: .875rem;
    --type-caption: .75rem;

    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font: 400 var(--type-body)/1.55 var(--font-body); }
body, button, input { font-family: var(--font-body); }
button, input { font-size: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; box-shadow: var(--focus-ring); }
::selection { color: #fff; background: var(--forest); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: var(--space-4); left: var(--space-4); padding: .7rem 1rem; color: white; background: var(--forest); border-radius: 0; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.wrap { width: min(var(--max-width), calc(100% - 40px)); margin: auto; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: var(--type-caption);
    font-weight: 800;
    color: var(--forest);
    line-height: 1.4;
}
.eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--gold);
}

h1, h2, h3, h4, p { margin-top: 0; margin-bottom: 0; }
h1, h2, h3 { letter-spacing: -0.04em; }
h1 { font-family: var(--font-display); font-size: var(--type-h1); font-weight: 500; line-height: 1.02; }
h2 { font-family: var(--font-display); font-size: var(--type-h2); font-weight: 500; line-height: 1.05; }
h3 { font-family: var(--font-display); font-size: var(--type-h3); line-height: 1.2; }
.lead { max-width: 720px; font-size: var(--type-lead); color: var(--lead-color); line-height: 1.55; }

/* SYSTEM.md Buttons */
.btn, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 24px;
    border-radius: 0;
    border: 1px solid transparent;
    font-size: var(--type-ui);
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
}
.btn:hover:not(:disabled), .button:hover:not(:disabled) { transform: translateY(-2px); }
.btn-primary, .button--primary, .button--dark { background: var(--forest); color: white; border-color: var(--forest); }
.btn-primary:hover:not(:disabled), .button--primary:hover:not(:disabled), .button--dark:hover:not(:disabled) { background: var(--forest-dark); border-color: var(--forest-dark); color: white; }
.btn-light { background: white; color: var(--forest); border-color: white; }
.btn-light:hover:not(:disabled) { background: #fdfdfd; color: var(--forest-dark); }
.btn-outline, .button--outline { border-color: rgba(255, 255, 255, 0.5); color: white; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); }
.btn-outline:hover:not(:disabled), .button--outline:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.8); }
.button--quiet { color: var(--muted); background: transparent; border: 1px solid transparent; }
.button--quiet:hover:not(:disabled) { color: var(--ink); background: rgba(23, 33, 29, 0.06); }
.button:disabled, .btn:disabled { color: #888e86; background: #e2e4de; border-color: #e2e4de; cursor: not-allowed; transform: none; }
.button--wide { width: 100%; }

.icon-button { width: 2.55rem; min-width: 2.55rem; min-height: 2.55rem; padding: 0; border: 1px solid var(--line); background: var(--white); font-size: 1.15rem; border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-button:hover:not(:disabled) { border-color: var(--forest); background: #edf3f0; color: var(--forest); }
.icon-button:disabled { color: #a8aca6; background: #f0f1ed; cursor: not-allowed; }
.text-button { min-height: 0; padding: .2rem 0; color: var(--forest); background: transparent; border: 0; border-radius: 0; font-weight: 700; cursor: pointer; }
.text-button:hover { text-decoration: underline; }

/* HEADER & NAV */
header {
    position: relative;
    z-index: 100;
    background: #F5EEE8;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}
.nav {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-bottom: 1px solid rgba(23, 33, 29, 0.08);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__img { width: 150px; height: auto; object-fit: contain; }
.navlinks { display: flex; gap: 28px; align-items: center; font-size: var(--type-ui); font-weight: 700; }
.navlinks a { color: var(--ink); opacity: 0.9; transition: color 0.2s ease, opacity 0.2s ease; }
.navlinks a:hover { opacity: 1; color: var(--forest); }
.nav-cta { display: inline-flex; align-items: center; gap: 14px; }
.nav-cta .btn { min-height: 44px; padding-inline: 16px; font-size: var(--type-ui); }
.admin-quick-link { color: var(--muted); font-size: var(--type-ui); font-weight: 650; }
.admin-quick-link:hover { color: var(--forest); }

@media (min-width: 901px) {
    header .wrap { width: 90%; max-width: none; margin: 0 auto; }
    .nav { height: 76px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
    .brand { justify-self: start; }
    .navlinks { justify-self: center; gap: 36px; }
    .nav-cta { justify-self: end; }
}

/* HERO */
.hero {
    min-height: 94vh;
    position: relative;
    display: grid;
    place-items: end start;
    color: white;
    padding: 0;
    overflow: visible;
    background:
        linear-gradient(90deg, rgba(9, 25, 21, 0.78) 0%, rgba(9, 25, 21, 0.42) 48%, rgba(9, 25, 21, 0.15) 100%),
        linear-gradient(0deg, rgba(9, 25, 21, 0.65) 0%, rgba(9, 25, 21, 0) 55%),
        url("/assets/images/hero.png") center / cover no-repeat;
}
.hero-inner { position: relative; z-index: 6; width: min(90vw, 1600px); max-width: none; padding: 90px 0 86px; }
.hero .eyebrow { color: white; }
.hero .eyebrow::before { background: white; }
.hero h1 { max-width: 1100px; font-size: var(--type-h1); }
.hero p { max-width: 680px; margin-top: 18px; font-size: var(--type-lead); color: rgba(255, 255, 255, 0.9); }
.hero .booking-grid { width: 100%; margin: 26px auto 0; }
.hero .card { color: var(--ink); }
.hero .calendar-card { padding: 1.5rem 1.75rem; }
.hero .calendar-card__top { align-items: center; gap: .6rem; }
.hero .calendar-card__top h3 { margin-bottom: .15rem; font-size: var(--type-h3); line-height: 1.15; }
.hero .calendar-card__top p { font-size: var(--type-ui); line-height: 1.35; }
.hero .calendar-icon { font-size: 1.1rem; }
.hero .calendar-card__requirements-note { margin: .2rem 0 .35rem; color: var(--muted); font-size: var(--type-caption); line-height: 1.35; }
.hero .calendar-date-picker { margin: .55rem 0; }
.hero .date-fields { gap: .5rem; }
.hero .date-field { min-height: 46px; gap: .15rem; padding: .3rem .6rem; }
.hero .date-field__label { font-size: var(--type-caption); }
.hero .date-field strong { font-size: var(--type-ui); }
.hero .calendar-card__guest-count { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: .1rem 0 .5rem; }
.hero .calendar-card__guest-count > label { color: var(--ink); font-size: var(--type-ui); font-weight: 600; }
.hero .calendar-card__guest-count-input { width: 4.5rem; min-height: 46px; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; }
.hero .calendar-card__guest-count-input:focus-visible { outline: 3px solid color-mix(in srgb, var(--forest) 50%, transparent); outline-offset: 2px; }
.hero .calendar-toolbar__hint { margin: 0; color: var(--muted); font-size: var(--type-caption); }
.hero .stay-summary { position: static; padding: 1.1rem 1.25rem; }
.hero .summary-line, .hero .summary-total { padding: .1rem 0; font-size: var(--type-caption); line-height: 1.3; }
.hero .summary-line { padding: .05rem 0; }
.hero .summary-total { margin-top: 0; padding-top: .2rem; font-size: var(--type-ui); }
.hero .summary-total strong { font-size: 1.2rem; }
.hero .stay-summary .btn { margin-top: 0; }
.hero .stay-summary__note { margin: .2rem 0 0; color: var(--muted); font-size: var(--type-caption); line-height: 1.35; }

/* BENEFITS */
.benefits { position: relative; z-index: 5; margin-top: -30px; }
.benefit-card { display: grid; grid-template-columns: repeat(4, 1fr); background: white; border-radius: 0; box-shadow: var(--shadow); padding: 26px 28px; }
.benefit { padding: 8px 24px; display: flex; gap: 14px; align-items: flex-start; border-right: 1px solid var(--line); }
.benefit:last-child { border-right: 0; }
.benefit-icon { width: 42px; height: 42px; min-width: 42px; display: grid; place-items: center; border-radius: 50%; background: #edf3f0; font-size: 20px; }
.benefit b { display: block; font-size: var(--type-ui); }
.benefit small { display: block; margin-top: 3px; color: var(--muted); line-height: 1.35; }

/* SECTIONS COMMON */
section { padding: 104px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 46px; }
.section-head .lead { max-width: 560px; }

/* SPLIT / INTRO */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
.photo-stack { position: relative; min-height: 600px; }
.photo-main { position: absolute; left: 0; top: 0; width: 78%; height: 520px; object-fit: cover; border-radius: 0; box-shadow: var(--shadow); }
.photo-small { position: absolute; right: 0; bottom: 0; width: 48%; height: 300px; object-fit: cover; border-radius: 0; border: 10px solid var(--paper); box-shadow: var(--shadow); }
.copy h2 { margin: 12px 0 24px; }
.copy p + p { margin-top: 16px; color: var(--lead-color); }
.copy .btn { margin-top: 28px; }

/* STAY & MOTOR CALENDAR */
.stay { background: #eef1ec; }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); align-items: stretch; gap: var(--space-5); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); }
.calendar-card { position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(1.4rem, 3vw, 2.4rem); }
.calendar-card__top { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.calendar-card__top h3 { margin: 0 0 .25rem; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 500; }
.calendar-card__top p { margin: 0; color: var(--muted); font-size: var(--type-ui); }
.calendar-icon { color: var(--forest); font-size: 1.35rem; }
.calendar-date-picker { position: relative; margin: var(--space-5) 0; }
.date-fields { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; }
.date-field { display: grid; justify-items: start; gap: .35rem; min-width: 0; min-height: 72px; padding: .8rem 1rem; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 0; cursor: pointer; }
.date-field:hover, .date-field[aria-expanded="true"] { border-color: var(--forest); }
.date-field__label { color: var(--muted); font-size: var(--type-caption); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.date-field strong { font-size: var(--type-ui); font-weight: 700; }
.date-fields__arrow { color: var(--muted); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: .2rem; }
.calendar-toolbar__hint { margin: 0; color: var(--muted); font-size: var(--type-caption); }
.calendar-toolbar__controls { display: flex; gap: .4rem; }
.calendar-popover { position: absolute; z-index: 20; top: calc(100% + .55rem); inset-inline: 0; box-sizing: border-box; padding: .4rem .7rem; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.calendar-popover[hidden] { display: none; }
.calendar-popover .loading-state { min-height: 2.5rem; }
.calendar-popover .calendar-months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.65rem, 1.5vw, 1.2rem); }
.calendar-popover .calendar-month { padding: 0; }
.calendar-popover .calendar-month h4 { margin: 0 0 .25rem; line-height: 1.2; }
.calendar-popover .calendar-grid { gap: .08rem; }
.calendar-popover .calendar-week--head { margin-bottom: .05rem; }
.calendar-popover .calendar-week--head span { height: 1.25rem; }
.calendar-popover .calendar-cell--outside { min-height: 1.75rem; }
.calendar-popover .calendar-day { width: min(1.75rem, 100%); }
.calendar-popover .calendar-legend { gap: 1rem; margin-top: .2rem; }
.calendar-close { font-size: 1.4rem; }
.loading-state { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 180px; color: var(--muted); font-size: var(--type-ui); }
.loading-state--compact { min-height: auto; margin-top: .6rem; font-size: var(--type-caption); }
.spinner { width: 1.1rem; height: 1.1rem; border: 2px solid var(--line); border-top-color: var(--forest); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.calendar-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.8rem); }
.calendar-month { min-width: 0; }
.calendar-month h4 { margin: .2rem 0 .8rem; text-align: center; font-size: var(--type-ui); font-weight: 700; }
.calendar-grid { display: grid; gap: .18rem; }
.calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; justify-items: center; }
.calendar-week--head { margin-bottom: .25rem; color: var(--muted); font-size: var(--type-caption); font-weight: 700; }
.calendar-week--head span { display: grid; width: 100%; height: 1.7rem; place-items: center; }
.calendar-cell { display: grid; width: 100%; min-width: 0; place-items: center; }
.calendar-cell--outside { min-height: 2.3rem; }
.calendar-day { display: grid; width: min(2.3rem, 100%); aspect-ratio: 1; padding: 0; color: var(--ink); background: transparent; border: 0; border-radius: 50%; cursor: pointer; font-size: var(--type-ui); place-items: center; font-weight: 600; }
.calendar-day:hover:not(:disabled):not(.is-selected) { background: #edf3f0; }
.calendar-day.is-selected { color: white; background: var(--forest); }
.calendar-day.is-in-range { background: #e2ede7; border-radius: 0; }
.calendar-day:disabled { color: #b6bab4; cursor: not-allowed; text-decoration: line-through; }
.calendar-day.is-unavailable:disabled { color: #9b8178; background: #f0e9e5; text-decoration: line-through; }
.calendar-day.is-checkout-only { color: var(--forest-dark); background: #e2ede7; border: 1px dashed var(--forest); text-decoration: none; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .9rem; color: var(--muted); font-size: var(--type-caption); }
.calendar-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.calendar-legend i { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; }
.calendar-legend__available { background: var(--forest); }
.calendar-legend__blocked { background: #d9c7bd; }
.availability-error { margin: .6rem 0 .25rem; }
.availability-retry { font-size: var(--type-caption); }
/* STAY SUMMARY CARD */
.stay-summary { position: sticky; top: 1rem; align-self: stretch; padding: 1.4rem; }
.summary-line, .summary-total { display: flex; justify-content: space-between; gap: .7rem; padding: .75rem 0; color: var(--muted); font-size: var(--type-ui); }
.summary-line strong { color: var(--ink); font-weight: 700; }
.summary-total { margin-top: .25rem; padding-top: 1rem; color: var(--forest); border-top: 1px solid var(--line); font-weight: 800; font-size: var(--type-ui); }
.summary-total strong { font-family: var(--font-display); font-size: 1.4rem; }
.stay-summary .btn, .stay-summary .button { margin-top: .9rem; }
.stay-summary__note { margin: .85rem 0 0; color: var(--muted); font-size: var(--type-caption); text-align: center; }

/* WHY / EXPERIENCE */
.why { background: var(--forest); color: white; overflow: hidden; }
.why-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.why-photo img { height: 620px; object-fit: cover; border-radius: 0; box-shadow: var(--shadow); }
.why .eyebrow { color: #e6d4b9; }
.why .eyebrow::before { background: #e6d4b9; }
.why h2 { margin: 14px 0 24px; }
.why .lead { color: rgba(255, 255, 255, 0.78); }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.feature { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.feature b { display: block; margin-bottom: 5px; font-size: var(--type-ui); }
.feature span { color: rgba(255, 255, 255, 0.68); font-size: var(--type-ui); line-height: 1.45; }

/* GALLERY GRID */
.gallery-grid { display: grid; grid-template-columns: 1.3fr 0.7fr 0.7fr; grid-template-rows: 310px 310px; gap: 16px; }
.gallery-grid img { height: 100%; object-fit: cover; border-radius: 0; box-shadow: var(--shadow); }
.gallery-grid img:first-child { grid-row: 1 / 3; }

/* TESTIMONIALS */
.testimonials { background: white; }
.quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.quote { margin: 0; padding: 28px 24px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 0; background: white; box-shadow: 0 4px 18px rgba(20, 63, 55, 0.04); }
.quote-avatar { width: 72px; height: 72px; margin: 0 0 16px; border: 2px solid var(--sand); border-radius: 50%; object-fit: cover; }
.stars { margin-bottom: 16px; color: #a2763f; letter-spacing: 0.12em; font-size: 1.05rem; }
.quote p { font-family: var(--font-display); font-size: var(--type-body); line-height: 1.6; color: #34413b; margin: 0; flex-grow: 1; }
.quote footer { margin-top: 20px; color: var(--muted); font-size: var(--type-ui); }
.quote footer b { color: var(--ink); }

/* FINAL CTA */
.final {
    position: relative;
    padding: 120px 0;
    color: white;
    background:
        linear-gradient(90deg, rgba(9, 25, 21, 0.86), rgba(9, 25, 21, 0.48)),
        url("/assets/images/island-coast.jpg") center / cover no-repeat;
}
.final-inner { max-width: 760px; }
.final h2 { margin: 14px 0 20px; }
.final p { max-width: 650px; color: rgba(255, 255, 255, 0.82); font-size: var(--type-lead); }
.final .btn { margin-top: 28px; }

/* FOOTER */
.site-footer { padding: 42px 0; background: #0b211d; color: #dbe5df; border-top: 0; min-height: auto; margin-top: 0; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-row .brand__img { width: 150px; height: 58px; object-fit: cover; object-position: center; }
.footer-note { text-align: right; color: #9db0a8; font-size: var(--type-ui); line-height: 1.5; }
.footer-note a { color: #dbe5df; text-decoration: underline; }
.footer-note .footer-phone { display: inline-flex; align-items: center; justify-content: flex-end; gap: .4rem; margin-top: .25rem; text-decoration: none; }
.footer-phone svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* STICKY MOBILE CTA */
.mobile-cta {
    position: fixed;
    z-index: 50;
    left: 14px;
    right: 14px;
    bottom: 14px;
    min-height: 56px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: var(--forest);
    color: white;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.mobile-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* Authentication screens */
.page-auth { min-height: 100vh; background: radial-gradient(ellipse at 70% 15%, #e5e2d5 0, transparent 35%), var(--color-paper); }
.auth-layout { display: grid; min-height: 100vh; align-content: center; justify-items: center; padding: 3rem 1rem 2rem; }
.brand--auth { margin-bottom: 2rem; }
.auth-card { width: min(100%, 450px); padding: clamp(1.5rem, 5vw, 2.6rem); background: var(--color-surface); border: 1px solid rgb(32 42 37 / 5%); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.auth-card > .eyebrow { color: var(--color-accent-dark); }
.auth-card h1 { margin: 0 0 1rem; font-size: var(--type-h1); }
.auth-intro { margin: 0 0 1.5rem; color: var(--color-muted); font-size: var(--type-ui); }
.form-stack { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field__label { font-size: var(--type-ui); font-weight: 650; }
.field__control { width: 100%; min-height: 3.1rem; padding: .75rem .9rem; color: var(--color-ink); background: #fbfaf6; border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.field__control::placeholder { color: #949991; }
.field__control:hover { border-color: #aab1a5; }
.field__hint { margin: 0; color: var(--color-muted); font-size: var(--type-caption); }
.auth-secondary { margin: 1.3rem 0 0; font-size: var(--type-ui); text-align: center; }
.auth-secondary a, .auth-footnote a { color: var(--color-accent-dark); font-weight: 650; }
.auth-footnote { display: flex; align-items: center; gap: .6rem; margin: 1.3rem 0 0; color: var(--color-muted); font-size: var(--type-caption); }
.alert { display: flex; align-items: start; gap: .7rem; margin: 0 0 1.1rem; padding: .85rem; border: 1px solid; border-radius: var(--radius-sm); font-size: var(--type-ui); }
.alert p { margin: 0; }
.alert--error { color: #7b302c; background: #fbefed; border-color: #eccdca; }
.alert--info { color: #4c5849; background: #edf0e8; border-color: #dbe1d4; }
.alert__icon { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: white; background: var(--color-error); border-radius: 50%; font-size: var(--type-caption); font-weight: 700; place-items: center; }
.result-mark { display: grid; width: 3.5rem; height: 3.5rem; margin: 0 0 1.2rem; color: white; background: var(--color-olive); border-radius: 50%; font-size: 1.5rem; place-items: center; }
.result-mark--success { background: var(--color-success); }

/* Administration shell and empty states */
.page-admin { min-height: 100vh; background: #f1f2ed; }
.admin-shell { display: grid; min-height: 100vh; grid-template-columns: 250px minmax(0, 1fr); }
.admin-sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 1.6rem 1.2rem 1.2rem; background: #e7e9e1; border-right: 1px solid #dfe2d9; }
.admin-sidebar .brand { padding: 0 .3rem 2rem; }
.nav-caption { margin: 0 0 .55rem; padding: 0 .7rem; color: #858c81; font-size: var(--type-caption); font-weight: 700; letter-spacing: .15em; }
.admin-nav { display: grid; gap: .3rem; }
.admin-nav__link { display: flex; align-items: center; gap: .7rem; min-height: 2.8rem; padding: .65rem .7rem; color: #5e675d; border-radius: var(--radius-sm); font-size: var(--type-ui); text-decoration: none; }
.admin-nav__link > span:first-child { width: 1.2rem; color: var(--color-olive); text-align: center; font-size: 1rem; }
a.admin-nav__link:hover, .admin-nav__link.is-active { color: var(--color-ink); background: rgb(255 254 250 / 75%); }
.admin-nav__link.is-active { font-weight: 700; box-shadow: inset 3px 0 var(--color-accent); }
.admin-nav__link.is-disabled { color: #858c81; cursor: default; }
.admin-nav__link small { margin-left: auto; font-size: var(--type-caption); }
.admin-sidebar__bottom { margin-top: auto; padding: 1rem .6rem .2rem; border-top: 1px solid #d4d9ce; }
.admin-back-link { color: #596458; font-size: var(--type-ui); text-decoration: none; }
.admin-sidebar__bottom p { margin: 1rem 0 0; font-size: var(--type-ui); font-weight: 650; }
.admin-sidebar__bottom p span { color: var(--color-muted); font-size: var(--type-caption); font-weight: 400; }
.admin-main { display: flex; min-width: 0; min-height: 100vh; flex-direction: column; }
.admin-topbar { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.2rem, 4vw, 3.5rem); background: rgb(255 254 250 / 72%); border-bottom: 1px solid #e2e4de; }
.admin-topbar .eyebrow { margin: 0 0 .22rem; font-size: var(--type-caption); }
.admin-topbar__property { margin: 0; font-family: var(--font-display); font-size: var(--type-h3); }
.admin-topbar__actions { display: flex; align-items: center; gap: .5rem; }
.admin-topbar__actions form { margin: 0; }
.admin-topbar__actions .button { min-height: 2.5rem; font-size: var(--type-ui); }
.admin-content { width: min(100%, 1500px); flex: 1; margin-inline: auto; padding: clamp(1.4rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3.5rem); }
.admin-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.7rem; }
.admin-page-heading h1 { margin: 0 0 .55rem; font-size: var(--type-h1); }
.admin-page-heading > div > p:last-child { margin: 0; color: var(--color-muted); font-size: var(--type-ui); }
.admin-date-chip, .coming-soon-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .8rem; color: #5e6858; background: #e3e8db; border-radius: var(--radius-pill); font-size: var(--type-ui); white-space: nowrap; }
.status-dot { width: .5rem; height: .5rem; background: #91a17e; border-radius: 50%; }
.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-card, .admin-panel { background: var(--color-surface); border: 1px solid rgb(32 42 37 / 5%); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.stat-card { display: grid; gap: .38rem; min-height: 135px; padding: 1.15rem; }
.stat-card > span { color: var(--color-muted); font-size: var(--type-caption); }
.stat-card > strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; }
.stat-card > small { color: #848b82; font-size: var(--type-caption); }
.stat-card__pending { color: var(--color-accent-dark); font-family: var(--font-body) !important; font-size: 1rem !important; font-weight: 650 !important; }
.admin-panels { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; }
.admin-panel { min-height: 290px; padding: 1.4rem; }
.admin-panel--welcome { position: relative; display: flex; overflow: hidden; align-items: center; background: #e7e6dc; }
.admin-panel__copy { z-index: 1; max-width: 340px; }
.admin-panel__copy h2, .admin-panel__title h2 { margin: 0 0 .7rem; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; line-height: 1.15; }
.admin-panel__copy > p:not(.eyebrow) { color: var(--color-muted); font-size: var(--type-caption); }
.coming-soon-pill { padding: .45rem .65rem; font-size: var(--type-caption); }
.admin-panel__art { position: absolute; right: -1rem; bottom: -2rem; width: 47%; height: 80%; opacity: .8; }
.art-sun { position: absolute; top: 1rem; right: 1rem; width: 4rem; height: 4rem; background: #d7b583; border-radius: 50%; }
.art-window { position: absolute; right: 15%; bottom: 0; width: 58%; height: 75%; background: #b5b9a4; border: .6rem solid #f2eee2; border-bottom: 0; border-radius: 50% 50% 0 0; }
.art-plant { position: absolute; right: 4%; bottom: 0; width: 25%; height: 49%; background: #7c896e; clip-path: polygon(40% 100%, 45% 30%, 10% 5%, 52% 35%, 90% 0, 60% 43%, 100% 54%, 57% 53%, 56% 100%); }
.admin-panel--empty { padding: 1.4rem; }
.admin-panel__title { display: flex; justify-content: space-between; align-items: start; }
.admin-panel__title .eyebrow { margin-bottom: .35rem; }
.admin-panel__title h2 { font-size: var(--type-h3); }
.panel-icon { display: grid; width: 2rem; height: 2rem; color: var(--color-accent); background: var(--color-accent-soft); border-radius: 50%; place-items: center; }
.empty-state { display: grid; justify-items: center; padding: 1.2rem .5rem; text-align: center; }
.empty-state__icon { display: grid; width: 3rem; height: 3rem; margin-bottom: .7rem; color: var(--color-olive); background: #eef0e9; border-radius: 50%; font-size: 1.25rem; place-items: center; }
.empty-state h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; }
.empty-state p { max-width: 260px; margin: 0; color: var(--color-muted); font-size: var(--type-caption); }
.admin-footer { padding: 1rem clamp(1.2rem, 4vw, 3.5rem); color: #8a9087; border-top: 1px solid #e0e3dc; font-size: var(--type-caption); letter-spacing: .08em; }
.admin-footer span { padding-inline: .3rem; }

@media (max-width: 900px) {
    .navlinks { display: none; }
    .nav { height: 64px; display: flex; align-items: center; justify-content: space-between; }
    .brand__img { width: 120px; }
    .hero { min-height: 88vh; background-position: 60% center; }
    .hero-inner { width: calc(100% - 40px); padding: 60px 0 60px; }
    .benefit-card { grid-template-columns: 1fr 1fr; }
    .benefit { border-right: 0; border-bottom: 1px solid var(--line); }
    .benefit:nth-child(odd) { border-right: 1px solid var(--line); }
    .benefit:nth-last-child(-n + 2) { border-bottom: 0; }
    .split, .why-grid { grid-template-columns: 1fr; gap: 44px; }
    .photo-stack { min-height: 520px; }
    .booking-grid { grid-template-columns: 1fr; }
    .hero .booking-grid { width: 100%; }
    .calendar-popover { position: static; width: 100%; margin-top: .6rem; }
    .calendar-months { grid-template-columns: 1fr; }
    .calendar-month:nth-of-type(2) { display: none; }
    .stay-summary { position: static; }
    .quotes { grid-template-columns: 1fr 1fr; }
    .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 230px 230px; }
    .gallery-grid img:first-child { grid-column: 1 / 3; grid-row: auto; }
    .section-head { display: block; }
    .section-head .lead { margin-top: 18px; }
    .admin-shell { grid-template-columns: 215px minmax(0, 1fr); }
    .admin-sidebar { padding-inline: .9rem; }
    .admin-panels { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    :root { --type-h1: clamp(3rem, 8vw, 3.5rem); --type-h2: clamp(2rem, 6vw, 2.75rem); --type-lead: 1rem; }
    .wrap { width: min(calc(100% - 28px), var(--max-width)); }
    h1 { font-size: var(--type-h1); }
    h2 { font-size: var(--type-h2); }
    section { padding: 78px 0; }
    .nav { height: 64px; justify-content: center; }
    .nav-cta, .navlinks { display: none; }
    .hero { min-height: 92vh; }
    .hero h1 { font-size: var(--type-h1); }
    .hero p { font-size: var(--type-body); }
    .benefits { margin-top: -24px; }
    .benefit-card { grid-template-columns: 1fr; padding: 12px 20px; }
    .benefit, .benefit:nth-child(odd) { padding: 16px 6px; border-right: 0; border-bottom: 1px solid var(--line); }
    .benefit:last-child { border-bottom: 0; }
    .photo-stack { min-height: 430px; }
    .photo-main { width: 88%; height: 370px; }
    .photo-small { width: 52%; height: 220px; border-width: 7px; }
    .why-photo img { height: 420px; }
    .feature-list { grid-template-columns: 1fr; }
    .quotes { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 230px); }
    .gallery-grid img:first-child { grid-column: auto; }
    .footer-row { flex-direction: column; align-items: flex-start; }
    .footer-note { text-align: left; }
    .mobile-cta { display: flex; }
    .site-footer { padding-bottom: 90px; }
    .calendar-card { padding: 1rem; }
    .date-fields { gap: .35rem; }
    .date-field { min-height: 66px; padding: .6rem; }
    .stay-summary { padding: 1.2rem; }
    .auth-layout { padding: 2rem 1rem 1.2rem; }
    .auth-card { padding: 1.4rem; }
    .admin-shell { display: block; }
    .admin-sidebar { position: static; height: auto; padding: .7rem 1rem; border-right: 0; border-bottom: 1px solid #dfe2d9; }
    .admin-sidebar .brand { padding: 0; }
    .admin-sidebar .brand__mark { width: 1.8rem; height: 1.8rem; }
    .nav-caption, .admin-sidebar__bottom { display: none; }
    .admin-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; margin-top: .75rem; }
    .admin-nav__link { justify-content: center; gap: .3rem; min-height: 2.5rem; padding: .35rem; font-size: var(--type-caption); }
    .admin-nav__link > span:first-child { width: auto; }
    .admin-nav__link small { display: none; }
    .admin-nav__link.is-active { box-shadow: inset 0 -2px var(--color-accent); }
    .admin-topbar { min-height: 72px; padding: .7rem 1rem; }
    .admin-topbar__property { font-size: var(--type-ui); }
    .admin-topbar__actions { gap: .1rem; }
    .admin-topbar__actions .button { min-height: 2.3rem; padding: .45rem .6rem; font-size: var(--type-ui); }
    .admin-topbar__actions .button--quiet { display: none; }
    .admin-content { padding: 1.5rem 1rem; }
    .admin-page-heading { align-items: start; flex-direction: column; }
    .admin-page-heading h1 { font-size: var(--type-h1); }
    .admin-stats { grid-template-columns: 1fr; gap: .65rem; }
    .stat-card { min-height: auto; grid-template-columns: 1fr auto; align-items: center; padding: .9rem; }
    .stat-card > strong { grid-column: 2; grid-row: 1 / span 2; }
    .stat-card > small { grid-column: 1; }
    .admin-panel { min-height: 260px; padding: 1.1rem; }
    .admin-panel__art { right: -2rem; width: 48%; opacity: .55; }
    .admin-footer { padding: .9rem 1rem; }
}

/* Hito 5 — pagos de demostración, sin presentación de proveedor financiero. */
.demo-badge{display:inline-flex;align-items:center;gap:.5rem;width:max-content;max-width:100%;padding:.55rem .85rem;border:1px solid #b57926;border-radius:999px;background:#fff4df;color:#713d0b;font-size: var(--type-caption);font-weight:700;letter-spacing:.04em}
.payment-shell{width:min(100% - 2rem,1100px);margin:clamp(2rem,7vw,5rem) auto}
.payment-shell h1{max-width:16ch;margin:.5rem 0 1rem;font-family:var(--font-display,Georgia,serif);font-size: var(--type-h1);font-weight:500;line-height:1.04}
.payment-intro{max-width:62ch;color:var(--color-muted,#62645e)}
.payment-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:1rem;margin:2rem 0}
.payment-summary,.payment-action,.payment-confirmation{padding:clamp(1.25rem,3vw,2rem)}
.payment-shell dl{display:grid;gap:.25rem;margin:1.2rem 0}
.payment-shell dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--color-line,#deded8)}
.payment-shell dt{color:var(--color-muted,#62645e)}
.payment-shell dd{margin:0;text-align:right;font-weight:650;overflow-wrap:anywhere}
.payment-shell .payment-total{margin-top:.35rem;border-top:2px solid var(--color-ink,#20221e);font-size:var(--type-body)}
.payment-status{padding:1rem;border-radius:var(--radius-md,12px);background:#f1f0e9}
.payment-footnote,.payment-intro{font-size: var(--type-ui);line-height:1.65}
.payment-error{padding:.8rem;border:1px solid #a33a32;border-radius:8px;color:#8e2923;background:#fff4f2}
.demo-warning{padding:1.1rem;border:2px solid #a33a32;border-radius:12px;color:#76221e;background:#fff2ef;font-weight:800;line-height:1.55}
.page-payment--confirmation .payment-confirmation{margin:1.5rem 0}
.payment-shell button:disabled{cursor:not-allowed;opacity:.62}
@media(max-width:700px){.payment-grid{grid-template-columns:1fr}.payment-shell dl>div{align-items:flex-start}.payment-shell dd{max-width:62%}}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.calendar-details { display: grid; grid-template-columns: minmax(9rem, .7fr) 1fr; gap: .75rem 1.25rem; margin: 1.5rem 0; }
.calendar-details dt { color: var(--color-muted); }
.calendar-details dd { margin: 0; overflow-wrap: anywhere; }
.admin-hint { max-width: 52rem; margin-top: 1.25rem; color: var(--color-muted); font-size: var(--type-ui); }
.alert--warning { border-inline-start: .25rem solid #bd7a18; padding: .75rem 1rem; background: #fff8e9; }
@media (max-width: 640px) { .calendar-details { grid-template-columns: 1fr; gap: .25rem; } .calendar-details dd { margin-bottom: .75rem; } }

/* Hito 6 — vistas administrativas propias y adaptables. */
.admin-nav { max-height: min(62vh, 42rem); overflow-y: auto; }
.demo-badge--small { padding: .4rem .6rem; font-size: var(--type-caption); }
.admin-stats--four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.admin-stats--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.stat-card__small { max-width: 100%; overflow-wrap: anywhere; font-size: 1.08rem !important; }
.admin-event-columns { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.admin-event-columns h3 { font-size: var(--type-ui); }
.admin-event-list { display:grid; gap:.45rem; margin:0; padding:0; list-style:none; }
.admin-event-list li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.5rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--color-line); font-size: var(--type-caption); }
.admin-event-list time { font-variant-numeric:tabular-nums; color:var(--color-muted); }
.admin-event-list span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-event-list a,.admin-table a { color:var(--color-olive); }
.empty-inline,.admin-hint { color:var(--color-muted); font-size: var(--type-ui); }
.admin-payment-total { margin:1.7rem 0 .2rem; font-family:var(--font-display); font-size:2.4rem; }
.admin-shortcuts { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }
.calendar-admin-panel { min-width:0; }
.calendar-admin-toolbar { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:1rem; }
.calendar-admin-toolbar h2 { min-width:12ch; margin:0; text-align:center; font-family:var(--font-display); font-size: var(--type-h3); font-weight:400; }
.calendar-admin-grid { border-top:1px solid var(--color-line); border-left:1px solid var(--color-line); }
.calendar-admin-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-admin-weekday { padding:.55rem .25rem; color:var(--color-muted); text-align:center; font-size: var(--type-caption); }
.calendar-admin-day { display:flex; min-height:7.2rem; min-width:0; flex-direction:column; gap:.22rem; padding:.45rem; border-right:1px solid var(--color-line); border-bottom:1px solid var(--color-line); background:#f8f8f4; font-size: var(--type-caption); }
.calendar-admin-day.is-outside { opacity:.52; }
.calendar-admin-day.is-today .calendar-admin-day__number { display:grid; width:1.6rem; height:1.6rem; place-items:center; border-radius:50%; color:white; background:var(--color-ink); }
.calendar-admin-day.is-confirmed { background:#e2eee6; }
.calendar-admin-day.is-pending,.calendar-admin-day.is-hold { background:#fff2d8; }
.calendar-admin-day.is-manual-block { background:#ede7dc; }
.calendar-admin-day.is-expired-hold { background:#f3e2e1; }
.calendar-admin-day__number { font-weight:750; font-variant-numeric:tabular-nums; }
.calendar-admin-day__state { overflow-wrap:anywhere; color:var(--color-muted); font-size: var(--type-caption); }
.calendar-admin-day__detail { color:var(--color-olive); font-size: var(--type-caption); }
.calendar-admin-day small { overflow:hidden; text-overflow:ellipsis; }
.calendar-admin-legend { display:flex; flex-wrap:wrap; gap:.7rem 1.1rem; margin-top:1rem; color:var(--color-muted); font-size: var(--type-caption); }
.calendar-admin-legend span::before { display:inline-block; width:.65rem; height:.65rem; margin-right:.35rem; border-radius:2px; background:#e2eee6; content:""; }
.calendar-admin-legend .legend-pending::before { background:#fff2d8; }
.calendar-admin-legend .legend-block::before { background:#ede7dc; }
.calendar-admin-legend .legend-expired::before { background:#f3e2e1; }
.admin-block-form { margin-top:1rem; }
.admin-form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; align-items:end; }
.admin-form-grid label,.admin-filter-form label { display:grid; gap:.35rem; font-size: var(--type-ui); font-weight:650; }
.admin-form-grid input,.admin-form-grid select,.admin-filter-form input,.admin-filter-form select { width:100%; min-width:0; min-height:2.7rem; padding:.55rem .65rem; border:1px solid var(--color-line); border-radius:var(--radius-sm); background:white; color:var(--color-ink); font:inherit; }
.admin-form-grid small { color:var(--color-muted); font-weight:400; }
.admin-filter-form { display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:.7rem; align-items:end; margin-bottom:1rem; padding:1rem; background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-md); }
.admin-table-wrap { width:100%; overflow:auto; border:1px solid var(--color-line); border-radius:var(--radius-md); background:var(--color-surface); }
.admin-table { width:100%; border-collapse:collapse; font-size: var(--type-ui); }
.admin-table th,.admin-table td { padding:.8rem .7rem; border-bottom:1px solid var(--color-line); text-align:left; vertical-align:top; }
.admin-table th { color:var(--color-muted); font-size: var(--type-caption); letter-spacing:.06em; text-transform:uppercase; }
.admin-table td code,.admin-details code { overflow-wrap:anywhere; }
.table-subnote { display:block; color:#89551c; font-size: var(--type-caption); font-weight:700; }
.status-pill { display:inline-flex; padding:.25rem .5rem; border-radius:999px; background:#eee; font-size: var(--type-caption); }
.status-pill--confirmed { background:#e2eee6; color:#28563c; }
.status-pill--pending { background:#fff2d8; color:#775116; }
.status-pill--cancelled,.status-pill--expired { background:#f3e2e1; color:#792f29; }
.admin-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.admin-details { display:grid; grid-template-columns:minmax(8rem,.6fr) 1fr; gap:.65rem 1rem; margin:1.3rem 0; font-size: var(--type-ui); }
.admin-details dt { color:var(--color-muted); }
.admin-details dd { min-width:0; margin:0; overflow-wrap:anywhere; }
.button--danger { color:white; background:#9d3932; border-color:#9d3932; }
.timeline { display:grid; gap:.75rem; margin:1rem 0 0; padding:0; list-style:none; }
.timeline li { display:grid; grid-template-columns:1fr 1fr; gap:.2rem .8rem; padding:.65rem 0; border-bottom:1px solid var(--color-line); font-size: var(--type-caption); }
.timeline li span,.timeline li time { color:var(--color-muted); }
.timeline li time { grid-column:1/-1; font-size: var(--type-caption); }
.settings-form { display:grid; gap:1rem; }
.settings-form .admin-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.message-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.message-preview { width:min(100%,42rem); margin:1rem auto; padding:clamp(1.2rem,4vw,2.4rem); border:1px solid var(--color-line); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-card); }
.message-preview header { display:flex; align-items:center; gap:.7rem; padding-bottom:1rem; border-bottom:1px solid var(--color-line); }
.message-preview h2 { font-family:var(--font-display); font-weight:400; }
.message-preview p { line-height:1.65; }
.message-stay { display:grid; gap:.3rem; margin:1rem 0; padding:1rem; background:#f1f2ed; }
.message-preview footer { margin-top:1rem; color:var(--color-muted); font-size: var(--type-caption); }
@media(max-width:1000px) { .admin-stats--four { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .admin-stats--three,.admin-stats--four { grid-template-columns:1fr; } .admin-event-columns,.admin-detail-grid { grid-template-columns:1fr; } .admin-form-grid,.settings-form .admin-form-grid,.admin-filter-form { grid-template-columns:1fr; } .calendar-admin-day { min-height:5rem; padding:.25rem; } .calendar-admin-day__state { font-size: var(--type-caption); } .calendar-admin-day__detail { font-size: var(--type-caption); } .calendar-admin-legend { gap:.5rem; } .admin-details { grid-template-columns:1fr; gap:.25rem; } .admin-details dd { margin-bottom:.5rem; } .admin-table { min-width:700px; } }

.checkout-shell { width: min(100% - 3rem, 1120px); margin: .5rem auto 1rem; padding: 0; }
.checkout-back { display: inline-flex; min-height: 2.75rem; align-items: center; margin-bottom: .25rem; }
.checkout-heading { max-width: 44rem; margin-bottom: .75rem; }
.checkout-heading .eyebrow { margin-bottom: .2rem; }
.checkout-heading h1 { margin: .15rem 0 .35rem; font-family: var(--font-display); font-size: var(--type-h1); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; }
.checkout-heading > p:last-child { margin: 0; color: var(--color-muted); font-size: var(--type-ui); line-height: 1.45; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: start; }
.checkout-summary-column { display: grid; min-width: 0; align-content: start; gap: .65rem; }
.checkout-card { padding: clamp(1rem, 2vw, 1.35rem); }
.checkout-card h2, .checkout-result h2 { margin: 0 0 .65rem; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; }
.checkout-dates { display: grid; grid-template-columns: 1fr auto 1fr; gap: .55rem; align-items: center; padding-block: .65rem; border-block: 1px solid var(--color-line); }
.checkout-dates div { display: grid; gap: .35rem; }
.checkout-dates span, .checkout-dates div > span { color: var(--color-muted); font-size: var(--type-caption); letter-spacing: .12em; }
.checkout-dates strong { font-size: var(--type-ui); }
.checkout-nights { color: var(--color-muted); }
.checkout-property { margin: .35rem 0; color: var(--color-ink); font-family: var(--font-display); font-size: var(--type-h3); }
.checkout-breakdown > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; }
.checkout-breakdown > div strong { font-variant-numeric: tabular-nums; }
.checkout-total { margin-top: .25rem; padding-top: .65rem !important; border-top: 1px solid var(--color-line); font-size: var(--type-ui); }
.checkout-expiry { color: var(--color-muted); font-size: var(--type-caption); line-height: 1.45; }
.checkout-form { display: grid; gap: .4rem; }
.checkout-form > p { margin: -.25rem 0 .15rem; color: var(--color-muted); font-size: var(--type-ui); line-height: 1.45; }
.checkout-form label:not(.consent-check) { margin-top: .15rem; font-size: var(--type-ui); font-weight: 600; }
.checkout-form label span { color: var(--color-muted); font-weight: 400; }
.checkout-form input:not([type="checkbox"]) { width: 100%; min-height: 2.75rem; padding: .55rem .75rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; }
.checkout-form select { width: 100%; min-height: 2.75rem; padding: .55rem .75rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; }
.checkout-form input:focus-visible,.checkout-form select:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 50%, transparent); outline-offset: 2px; }
.phone-input { display: grid; grid-template-columns: minmax(6.8rem, auto) minmax(0, 1fr); gap: .4rem; }
.phone-input select { width: auto; min-width: 0; padding-inline: .55rem; }
.phone-input input { min-width: 0; }
.phone-input__hint { margin-top: -.2rem; color: var(--color-muted); font-size: var(--type-caption); line-height: 1.4; }
.consent-check { display: flex; gap: .65rem; align-items: flex-start; margin-block: .35rem; font-size: var(--type-ui); line-height: 1.4; }
.consent-check input { margin-top: .18rem; accent-color: var(--color-accent); }
.flow-preview { align-self: start; display: grid; gap: .55rem; padding: clamp(1rem, 2vw, 1.35rem); }
.flow-preview__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--color-line); }
.flow-preview__eyebrow { margin: 0 0 .25rem; color: var(--color-muted); font-size: var(--type-caption); letter-spacing: .08em; text-transform: uppercase; }
.flow-preview h2 { margin: 0; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; }
.flow-preview__wordmark { color: var(--forest); font-size: 1.5rem; font-weight: 800; letter-spacing: -.08em; }
.flow-preview__order { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: var(--type-ui); }
.flow-preview__order > span { color: var(--color-muted); }
.flow-preview__order > strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.flow-preview__fields { display: grid; gap: .4rem; }
.flow-preview__field { display: grid; min-height: 2.75rem; align-content: center; gap: .1rem; padding: .35rem .65rem; border: 1px solid var(--color-line); background: var(--color-surface); }
.flow-preview__field > span { color: var(--color-muted); font-size: var(--type-caption); }
.flow-preview__field > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; font-size: var(--type-ui); }
.flow-preview__card-number { font-variant-numeric: tabular-nums; }
.flow-preview__card-number b { color: var(--forest); font-size: var(--type-caption); }
.flow-preview__columns { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.flow-preview__submit { display: flex; width: 100%; min-height: 2.75rem; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .8rem; border: 0; color: var(--white); background: var(--forest); font: 800 var(--type-ui)/1.2 var(--font-body); text-align: center; cursor: pointer; }
.flow-preview__submit:disabled { opacity: .6; cursor: not-allowed; }
.flow-preview__submit:focus-visible, paypal-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 55%, transparent); outline-offset: 3px; }
.paypal-actions { display: grid; gap: .65rem; }
.paypal-state { margin: 0; min-height: 1.5em; color: var(--color-muted); font-size: var(--type-ui); line-height: 1.45; }
.paypal-state[data-state="success"] { color: var(--forest); font-weight: 700; }
.paypal-state[data-state="warning"], .paypal-state[data-state="error"] { color: var(--color-error); }
.paypal-button-preview[inert] { opacity: .68; pointer-events: none; }
paypal-button { --paypal-button-border-radius: 0px; display: block; width: 100%; min-height: 2.75rem; }
paypal-button[hidden] { display: none; }
.checkout-result { margin-top: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); }
.checkout-result dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.checkout-result dl div { min-width: 0; }
.checkout-result dt { color: var(--color-muted); font-size: var(--type-caption); }
.checkout-result dd { margin: .3rem 0 0; overflow-wrap: anywhere; font-weight: 600; }
.checkout-timer { color: var(--color-muted); font-size: var(--type-ui); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .checkout-shell { width: min(100% - 2rem, 600px); margin-top: .5rem; } .checkout-grid { grid-template-columns: 1fr; } .checkout-result dl { grid-template-columns: 1fr; gap: .7rem; } }

/* Pagos y confirmación alineados con las proporciones del checkout. */
.payment-shell {
    width: min(100% - 3rem, 1120px);
    margin: .5rem auto 1.25rem;
    padding: 0;
}
.payment-shell > .eyebrow { margin-bottom: .2rem; }
.payment-shell h1 {
    max-width: 24ch;
    margin: .15rem 0 .35rem;
    font-size: var(--type-h1);
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: 1.05;
}
.payment-intro {
    max-width: 62ch;
    margin: 0 0 .75rem;
    color: var(--color-muted);
    font-size: var(--type-ui);
    line-height: 1.45;
}
.payment-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    margin: 0 0 .75rem;
}
.payment-summary,
.payment-action,
.payment-confirmation {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.35rem);
}
.payment-summary h2,
.payment-action h2 {
    margin: 0 0 .65rem;
    font-family: var(--font-display);
    font-size: var(--type-h3);
    font-weight: 400;
}
.payment-shell dl {
    gap: 0;
    margin: .35rem 0 .7rem;
}
.payment-shell dl > div {
    min-width: 0;
    align-items: baseline;
    padding: .52rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--type-ui);
    line-height: 1.4;
}
.payment-shell dt { font-size: var(--type-ui); }
.payment-shell dd { max-width: 60%; font-variant-numeric: tabular-nums; }
.payment-shell .payment-total {
    margin-top: .25rem;
    padding-top: .65rem;
    border-top: 1px solid var(--color-line);
    border-bottom: 0;
    font-size: var(--type-ui);
}
.payment-shell .payment-total dd {
    color: var(--forest);
    font-family: var(--font-display);
    font-size: var(--type-h3);
    font-weight: 600;
}
.payment-status {
    margin: .65rem 0 0;
    padding: .65rem .75rem;
    border-radius: 0;
    background: var(--color-surface-soft);
    font-size: var(--type-ui);
    line-height: 1.45;
}
.payment-timer,
.payment-footnote {
    margin: .55rem 0 0;
    color: var(--color-muted);
    font-size: var(--type-caption);
    line-height: 1.45;
}
.payment-action > p:first-of-type {
    margin: 0 0 .85rem;
    color: var(--color-muted);
    font-size: var(--type-ui);
    line-height: 1.5;
}
.payment-action .button { width: 100%; min-height: 2.75rem; padding: .55rem .8rem; }
.payment-error { margin: .65rem 0 0; border-radius: 0; font-size: var(--type-ui); line-height: 1.45; }
.page-payment--confirmation .payment-confirmation { margin: .75rem 0; }
.payment-confirmation [data-confirmation-loading],
.payment-confirmation [data-confirmation-error] {
    margin: 0;
    font-size: var(--type-ui);
    line-height: 1.5;
}
.payment-confirmation [data-confirmation-error] { color: var(--color-error); }
.payment-confirmation dl[hidden] { display: none; }
.payment-confirmation dl:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    margin: 0;
}
.payment-confirmation dl > div {
    display: grid;
    align-content: start;
    gap: .25rem;
    padding: .75rem 0;
}
.payment-confirmation dt { font-size: var(--type-caption); letter-spacing: .04em; }
.payment-confirmation dd { max-width: 100%; text-align: left; line-height: 1.4; }
.payment-confirmation dl > div:nth-last-child(-n + 2) { border-bottom: 0; }
.payment-shell > .button { min-height: 2.75rem; padding: .55rem 1rem; }
@media (max-width: 760px) {
    .payment-shell { width: min(100% - 2rem, 600px); margin-top: .5rem; }
    .payment-grid { grid-template-columns: 1fr; }
    .payment-confirmation dl:not([hidden]) { grid-template-columns: 1fr; gap: 0; }
    .payment-confirmation dl > div:nth-last-child(-n + 2) { border-bottom: 1px solid var(--color-line); }
    .payment-confirmation dl > div:last-child { border-bottom: 0; }
}
.payment-confirmation__heading,
.payment-confirmation__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.payment-confirmation__heading { margin-bottom: .75rem; }
.payment-confirmation__heading h1 { margin: .15rem 0 .35rem; }
.payment-confirmation__heading .button,
.payment-confirmation__actions .button { flex: 0 0 auto; min-height: 2.75rem; padding: .55rem 1rem; }
.button--support { color: var(--forest); background: transparent; border-color: var(--forest); }
.button--support:hover:not(:disabled) { color: var(--white); background: var(--forest); }
.payment-confirmation__actions { justify-content: flex-start; margin-top: .85rem; }
@media (max-width: 600px) {
    .payment-confirmation__heading { align-items: flex-start; flex-direction: column; }
    .payment-confirmation__heading .button { width: 100%; }
    .payment-confirmation__actions { align-items: stretch; flex-direction: column; }
    .payment-confirmation__actions .button { width: 100%; }
}
@page { size: A4 portrait; margin: 15mm; }
@media print {
    html, body { min-width: 0; color: #17211d; background: #fff; }
    header, .site-footer, .skip-link, .mobile-cta,
    .payment-confirmation__heading .button, .payment-confirmation__actions { display: none !important; }
    main { margin: 0; padding: 0; }
    .payment-shell {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        color: #17211d;
    }
    .payment-shell > .eyebrow { margin-bottom: .35rem; }
    .payment-confirmation__heading { display: block; margin-bottom: 1rem; }
    .payment-confirmation__heading h1 { max-width: none; margin: 0; font-size: 26pt; line-height: 1.12; }
    .payment-confirmation {
        margin: 0 !important;
        padding: 7mm;
        border: 1px solid #d5d9d5;
        background: #fff;
        box-shadow: none;
        break-inside: avoid;
    }
    .payment-confirmation dl:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10mm; }
    .payment-confirmation dl > div { padding: 4mm 0; border-bottom: 1px solid #e3e6e3; }
    .payment-confirmation dl > div:nth-last-child(-n + 2) { border-bottom: 0; }
    .payment-confirmation dt { color: #66746d; }
    .payment-confirmation dd { color: #17211d; }
    a { color: inherit; text-decoration: none; }
}

.legal-document { max-width: 56rem; padding-block: clamp(2.5rem, 6vw, 5rem); }
.legal-document > h1 { color: var(--forest); font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 500; line-height: 1.05; }
.legal-document .booking-policies__section h2 { margin: 0 0 .75rem; color: var(--forest); font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; line-height: 1.25; }
.legal-document .booking-policies__section { padding-block: .5rem 1.4rem; }
body.print-privacy-policy { position: static !important; inset: auto !important; overflow: visible !important; }
body.print-privacy-policy > :not(dialog[data-privacy-policy-dialog]) { display: none !important; }
body.print-privacy-policy dialog[data-privacy-policy-dialog], body.print-privacy-policy dialog[data-privacy-policy-dialog][open] { display: block !important; position: static !important; inset: auto !important; width: 100% !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; background: #fff !important; color: #111 !important; }
body.print-privacy-policy dialog[data-privacy-policy-dialog]::backdrop { display: none !important; }
body.print-privacy-policy .booking-policies__shell { display: block !important; height: auto !important; }
body.print-privacy-policy .booking-policies__close, body.print-privacy-policy .booking-policies__footer { display: none !important; }
body.print-privacy-policy .booking-policies__content { display: block !important; max-height: none !important; overflow: visible !important; padding: 1rem 0 !important; }

/* Versioned Booking Policies dialog; visual tokens follow SYSTEM.md. */
.footer-legal { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem 1rem; margin-top:.6rem; }
.footer-legal a,.booking-policy-link { color:inherit; font-size:var(--type-ui); text-decoration:underline; text-underline-offset:.18em; }
.booking-policy-link { display:inline-flex; width:max-content; max-width:100%; margin-top:.55rem; color:var(--forest); font-weight:700; }
dialog.booking-policies {
    position:fixed; inset:0; width:min(880px,calc(100vw - 2rem)); max-width:none;
    max-height:min(840px,calc(100dvh - 2rem)); height:min(840px,calc(100dvh - 2rem));
    margin:auto; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:0;
    background:var(--white); color:var(--ink); box-shadow:var(--shadow-float);
}
dialog.booking-policies::backdrop { background:rgba(11,33,29,.72); }
.booking-policies__shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:100%; height:100%; min-height:0; }
.booking-policies__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:clamp(1rem,3vw,1.75rem); border-bottom:1px solid var(--line); background:var(--white); }
.booking-policies__header .eyebrow { margin-bottom:.45rem; }
.booking-policies__header h2 { max-width:24ch; margin:0; font-size:clamp(1.65rem,3vw,2.25rem); line-height:1.12; }
.booking-policies__subtitle { margin-top:.65rem; color:var(--muted); font-size:var(--type-ui); }
.booking-policies__close { flex:0 0 auto; display:grid; place-items:center; width:2.75rem; height:2.75rem; border:1px solid var(--line); border-radius:0; background:var(--paper); color:var(--ink); font-size:1.7rem; line-height:1; cursor:pointer; }
.booking-policies__content { min-height:0; overflow:auto; overscroll-behavior:contain; padding:clamp(1rem,3vw,2rem); scroll-padding-block:1rem; }
.booking-policies__notice { max-width:62ch; margin:clamp(1rem,4vw,2.5rem) auto; padding:clamp(1rem,3vw,2rem); border-left:3px solid var(--gold); background:var(--paper); }
.booking-policies__notice h3 { margin:.3rem 0 .8rem; color:var(--forest); font-family:var(--font-display); font-size:var(--type-h3); font-weight:500; letter-spacing:-.02em; }
.booking-policies__notice p,.booking-policies__section p,.booking-policies__section li,.booking-policies__privacy { margin:.65rem 0; color:var(--lead-color); font-size:var(--type-ui); line-height:1.65; }
.booking-policies__section { padding:0 0 1.4rem; margin:0 0 1.4rem; border-bottom:1px solid var(--line); }
.booking-policies__section h3 { margin:0 0 .75rem; color:var(--forest); font-family:var(--font-display); font-size:1.25rem; font-weight:500; letter-spacing:-.02em; line-height:1.25; }
.booking-policies__section h4 { margin:1rem 0 .4rem; font-size:var(--type-ui); }
.booking-policies__section ul { margin:.4rem 0; padding-left:1.3rem; }
.booking-policies__version { margin:0 0 1rem; color:var(--muted); font-size:var(--type-caption); }
.booking-policies__table-wrap { margin:1rem 0; }
.booking-policies__table-wrap table { width:100%; border-collapse:collapse; font-size:var(--type-ui); }
.booking-policies__table-wrap th,.booking-policies__table-wrap td { padding:.7rem; border:1px solid var(--line); text-align:left; vertical-align:top; }
.booking-policies__table-wrap th { background:var(--paper); color:var(--ink); font-weight:700; }
.booking-policies__contact { display:flex; flex-wrap:wrap; gap:.65rem 1.25rem; margin-top:1rem !important; }
.booking-policies__contact a,.booking-policies__privacy a { color:var(--forest); font-weight:700; text-decoration:underline; text-underline-offset:.15em; }
.booking-policies__footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem clamp(1rem,3vw,1.75rem); border-top:1px solid var(--line); background:var(--paper); }
.booking-policies__footer p { margin:0; color:var(--muted); font-size:var(--type-caption); }
.booking-policies__footer .btn { flex:0 0 auto; min-height:2.75rem; }
@media (max-width:640px) {
    .footer-legal { justify-content:flex-start; }
    dialog.booking-policies { width:calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)); height:calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height:none; }
    .booking-policies__header { gap:.65rem; padding:1rem; }
    .booking-policies__header h2 { max-width:22ch; font-size:1.55rem; }
    .booking-policies__close { width:2.65rem; height:2.65rem; }
    .booking-policies__content { padding:1rem; }
    .booking-policies__table-wrap table,.booking-policies__table-wrap tbody,.booking-policies__table-wrap tr,.booking-policies__table-wrap td { display:block; width:100%; }
    .booking-policies__table-wrap thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .booking-policies__table-wrap tr { margin-bottom:.75rem; border:1px solid var(--line); }
    .booking-policies__table-wrap td { display:grid; grid-template-columns:minmax(7.5rem,.8fr) minmax(0,1.2fr); gap:.6rem; padding:.6rem; border:0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
    .booking-policies__table-wrap td:last-child { border-bottom:0; }
    .booking-policies__table-wrap td::before { content:attr(data-label); color:var(--muted); font-weight:700; }
    .booking-policies__footer { align-items:stretch; padding-bottom:calc(.85rem + env(safe-area-inset-bottom)); }
    .booking-policies__footer p { align-self:center; }
    .booking-policies__footer .btn { min-width:6rem; }
}

@media print {
    body.print-booking-policies { position:static !important; inset:auto !important; overflow:visible !important; }
    body.print-booking-policies > :not(dialog.booking-policies) { display:none !important; }
    body.print-booking-policies dialog.booking-policies,
    body.print-booking-policies dialog.booking-policies[open] { display:block !important; position:static !important; inset:auto !important; width:100% !important; height:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; border:0 !important; box-shadow:none !important; background:#fff !important; color:#111 !important; }
    body.print-booking-policies dialog.booking-policies::backdrop { display:none !important; }
    body.print-booking-policies .booking-policies__shell { display:block !important; height:auto !important; }
    body.print-booking-policies .booking-policies__header { padding:0 0 1rem !important; }
    body.print-booking-policies .booking-policies__close,
    body.print-booking-policies .booking-policies__footer { display:none !important; }
    body.print-booking-policies .booking-policies__content { display:block !important; max-height:none !important; overflow:visible !important; padding:1rem 0 !important; }
    body.print-booking-policies .booking-policies__section { break-inside:avoid; }
    body.print-booking-policies .booking-policies__table-wrap { overflow:visible !important; }
}

/* H7 guest experience: reuse the HOMITI paper, forest, sand and gold tokens. */
.booking-confirmation,.guest-information-shell { width:min(100% - 3rem,1120px); margin:clamp(1rem,4vw,3rem) auto; }
.booking-confirmation__hero,.booking-confirmation__pending { padding:clamp(1.5rem,5vw,3.5rem); text-align:center; }
.booking-confirmation__hero img,.booking-confirmation__pending img,.guest-recovery-shell img { display:block; width:min(180px,52vw); height:auto; margin:0 auto 1.5rem; }
.booking-confirmation__hero .eyebrow,.booking-confirmation__pending .eyebrow,.guest-information-heading .eyebrow,.guest-recovery-shell .eyebrow { color:var(--gold); }
.booking-confirmation h1,.guest-information-heading h1,.guest-recovery-shell h1 { font-family:var(--font-display); font-size:var(--type-h1); font-weight:400; line-height:1.08; }
.booking-confirmation__lead { color:var(--muted); font-size:var(--type-lead); max-width:42rem; margin:0 auto 1.3rem; }
.booking-confirmation__reference { display:inline-grid; gap:.2rem; padding:.8rem 1.2rem; background:var(--paper); border:1px solid var(--line); }
.booking-confirmation__reference span,.guest-booking-summary span { color:var(--muted); font-size:var(--type-caption); letter-spacing:.08em; }
.booking-confirmation__reference strong { font:600 1.1rem var(--font-body); letter-spacing:.12em; overflow-wrap:anywhere; }
.booking-confirmation__grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.booking-confirmation__details,.booking-confirmation__entry { padding:clamp(1.2rem,3vw,2rem); }
.booking-confirmation__details h2,.booking-confirmation__entry h2,.guest-information-shell h2,.guest-recovery-shell h2 { margin:.2rem 0 .8rem; color:var(--forest); font:400 var(--type-h2)/1.15 var(--font-display); }
.booking-confirmation__details dl { margin:1rem 0 0; }
.booking-confirmation__details dl>div { display:flex; justify-content:space-between; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line); }
.booking-confirmation__details dt { color:var(--muted); }
.booking-confirmation__details dd { margin:0; text-align:right; font-weight:650; }
.booking-confirmation__entry p { color:var(--muted); }
.booking-confirmation__entry .button--outline,.guest-certificate-actions .button--outline { border-color:var(--forest); color:var(--forest); background:var(--white); backdrop-filter:none; }
.booking-confirmation__entry .button--outline:hover:not(:disabled),.guest-certificate-actions .button--outline:hover:not(:disabled) { border-color:var(--forest-dark); color:var(--forest-dark); background:var(--color-accent-soft); }
.booking-confirmation__official,.booking-confirmation__fui { display:block; margin-top:.9rem; color:var(--forest); font-weight:650; }
.booking-confirmation__fui { font-size:var(--type-caption); }
.booking-confirmation__pending { max-width:760px; margin-inline:auto; }
.booking-confirmation__pending p:not(.eyebrow) { max-width:42rem; margin:1rem auto 1.5rem; color:var(--muted); }
.guest-information-heading { margin:0 0 1.4rem; }
.guest-information-heading h1 { margin:.2rem 0 .5rem; }
.guest-information-heading>p:last-child { color:var(--muted); }
.guest-booking-summary { display:grid; grid-template-columns:auto 1fr; gap:.45rem 1rem; align-items:baseline; padding:1rem 1.3rem; margin:0 0 1rem; }
.guest-booking-summary strong { overflow-wrap:anywhere; }
.guest-privacy-pending,.guest-complete,.guest-form-card,.guest-start-card,.guest-access-needed { padding:clamp(1.2rem,3vw,2rem); }
.guest-privacy-pending h2,.guest-complete h2,.guest-access-needed h2 { margin-top:.2rem; }
.guest-privacy-pending p:not(.eyebrow),.guest-complete p,.guest-access-needed p { color:var(--muted); }
.guest-correction-form { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--line); }
.guest-correction-form .consent-check { margin:1rem 0; }
.guest-certificate-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.9rem; }
.traveler-slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.traveler-slot { min-width:0; margin:0; padding:1.2rem; border:1px solid var(--line); background:var(--white); }
.traveler-slot legend { padding:0 .35rem; color:var(--forest); font:400 1.25rem var(--font-display); }
.traveler-slot label,.guest-recovery-shell label { display:block; margin:.8rem 0 .3rem; font-weight:650; }
.traveler-slot input,.traveler-slot select,.guest-recovery-shell input { width:100%; min-height:48px; padding:.65rem .75rem; border:1px solid var(--line); border-radius:0; background:var(--white); color:var(--ink); font:inherit; }
.traveler-slot input:focus-visible,.traveler-slot select:focus-visible,.guest-recovery-shell input:focus-visible { outline:3px solid color-mix(in srgb,var(--forest) 45%,transparent); outline-offset:2px; }
.traveler-slot__privacy,.guest-start-card>p,.guest-form-card>p { color:var(--muted); font-size:var(--type-caption); }
.guest-form-card form>.button,.guest-form-card form>p { margin-top:1rem; }
.guest-form-card form>.button + .button { margin-left:.6rem; }
.guest-start-card form .consent-check { margin:1rem 0; }
.guest-privacy-section { padding:.7rem 0; border-bottom:1px solid var(--line); }
.guest-privacy-section summary { color:var(--forest); font-weight:650; cursor:pointer; }
.guest-privacy-section p { color:var(--muted); }
.guest-recovery-shell { width:min(100% - 3rem,640px); margin:clamp(1.5rem,7vw,5rem) auto; padding:clamp(1.4rem,5vw,2.5rem); }
.guest-recovery-shell h1 { margin:.25rem 0 1rem; }
.guest-recovery-shell>p:not(.eyebrow) { color:var(--muted); }
.guest-recovery-shell form { margin:1.3rem 0; }
.guest-recovery-shell form .button { width:100%; margin-top:1rem; }
.page-thank-you .mobile-cta,.page-guest-information .mobile-cta,.page-guest-recovery .mobile-cta,.page-guest-access .mobile-cta { display:none; }
@media (max-width:900px) { .booking-confirmation__grid { grid-template-columns:1fr; } }
@media (max-width:640px) {
    .booking-confirmation,.guest-information-shell { width:min(100% - 2rem,600px); margin:1rem auto; }
    .booking-confirmation__hero,.booking-confirmation__pending { padding:1.5rem 1rem; }
    .booking-confirmation__details dl>div { align-items:flex-start; }
    .traveler-slots { grid-template-columns:1fr; }
    .traveler-slot { padding:1rem; }
    .guest-recovery-shell { width:min(100% - 2rem,600px); margin:1rem auto; }
    .guest-certificate-actions { flex-direction:column; }
    .guest-certificate-actions .button { width:100%; }
}

/* Mobile layout completion. All rules here are scoped below the desktop layout. */
@media (max-width: 640px) {
    h1, h2, h3 { overflow-wrap: anywhere; }

    /* Keep the public actions reachable on every page that has no booking CTA. */
    .page-thank-you .nav,
    .page-guest-information .nav,
    .page-privacy-policy .nav,
    .page-guest-recovery .nav,
    .page-guest-access .nav,
    .page-checkout .nav,
    .page-payment .nav {
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .5rem;
        padding-block: .5rem;
    }

    .page-thank-you .nav-cta,
    .page-guest-information .nav-cta,
    .page-privacy-policy .nav-cta,
    .page-guest-recovery .nav-cta,
    .page-guest-access .nav-cta,
    .page-checkout .nav-cta,
    .page-payment .nav-cta {
        display: flex;
        width: 100%;
        flex: 1 1 100%;
        gap: .5rem;
    }

    .page-thank-you .nav-cta .btn,
    .page-guest-information .nav-cta .btn,
    .page-privacy-policy .nav-cta .btn,
    .page-guest-recovery .nav-cta .btn,
    .page-guest-access .nav-cta .btn,
    .page-checkout .nav-cta .btn,
    .page-payment .nav-cta .btn {
        min-width: 0;
        min-height: 44px;
        flex: 1 1 0;
        padding: .45rem .5rem;
        font-size: var(--type-caption);
        line-height: 1.3;
        text-align: center;
    }

    /* Only the home page has the #stay target used by the floating CTA. */
    .page-home .mobile-cta { display: none; }
    .page-thank-you .mobile-cta,
    .page-guest-information .mobile-cta,
    .page-privacy-policy .mobile-cta,
    .page-guest-recovery .mobile-cta,
    .page-guest-access .mobile-cta,
    .page-checkout .mobile-cta,
    .page-payment .mobile-cta { display: none; }

    .mobile-cta {
        left: max(14px, env(safe-area-inset-left));
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .site-footer { padding-bottom: calc(42px + env(safe-area-inset-bottom)); }

    .admin-shell { min-width: 0; }
    .admin-sidebar, .admin-main, .admin-content { min-width: 0; }
    .admin-nav { max-height: none; overflow: visible; }
    .admin-topbar {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .65rem;
    }
    .admin-topbar > div:first-child { min-width: 0; flex: 1 1 12rem; }
    .admin-topbar__property { overflow-wrap: anywhere; }
    .admin-topbar__actions {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .admin-topbar__actions .demo-badge { white-space: normal; overflow-wrap: anywhere; }
    .admin-page-heading > div { min-width: 0; }
    .admin-page-heading .demo-badge,
    .admin-page-heading .admin-date-chip,
    .admin-page-heading .coming-soon-pill {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .admin-table-wrap { -webkit-overflow-scrolling: touch; }
    .admin-filter-form > *, .admin-form-grid > *, .admin-panel, .stat-card { min-width: 0; }
    .admin-form-grid input[type="checkbox"] { width: 1.1rem; min-height: 1.1rem; }
    .admin-form-grid label:has(input[type="checkbox"]) {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
    }
    .admin-form-grid label:has(input[type="checkbox"]) input[type="checkbox"] { flex: 0 0 auto; }

    .checkout-shell, .payment-shell { width: min(calc(100% - 2rem), 600px); }
    .checkout-dates { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .35rem; }
    .checkout-dates > div { min-width: 0; }
    .checkout-dates strong, .checkout-breakdown > div strong { overflow-wrap: anywhere; }
    .checkout-breakdown > div { align-items: flex-start; }
    .checkout-breakdown > div strong { max-width: 62%; text-align: right; }
    .checkout-result dl { grid-template-columns: minmax(0, 1fr); }

    .payment-shell dl > div { flex-wrap: wrap; gap: .35rem .5rem; }
    .payment-shell dt { min-width: 0; flex: 0 1 38%; overflow-wrap: anywhere; }
    .payment-shell dd { min-width: 0; max-width: 62%; flex: 0 1 62%; overflow-wrap: anywhere; }

    .guest-booking-summary { grid-template-columns: minmax(5rem, .55fr) minmax(0, 1fr); padding: 1rem; }
    .booking-confirmation__details dd { min-width: 0; overflow-wrap: anywhere; }

    .booking-policies__footer { flex-wrap: wrap; }
    .booking-policies__footer p { flex: 1 1 100%; }
    .booking-policies__footer .btn { flex: 1 1 auto; }
}

@media (max-width: 360px) {
    .admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-nav__link { justify-content: flex-start; min-height: 2.75rem; font-size: var(--type-caption); }
    .admin-content { padding-inline: .75rem; }
    .admin-topbar { padding-inline: .75rem; }
    .admin-topbar__actions .button { padding-inline: .45rem; }
    .calendar-card__top { align-items: flex-start; }
    .calendar-toolbar { align-items: flex-start; }
    .calendar-toolbar__hint { min-width: 0; }
    .payment-shell dl > div { align-items: flex-start; }
}

@media (max-width: 620px) {
    .page-home .mobile-cta { display: flex; }
    .page-home .site-footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}