/* Structure and components of the public booking site.

   Every colour, font and radius comes from storefront-tokens.css, so this file
   is written once and each template re-skins it. Template-specific structure
   (mosaic spans, arches, offset shadows) lives in storefront-themes.css. */

*, *::before, *::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }
html.sfp-smooth { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html.sfp-smooth { scroll-behavior: auto } }

body.sfp-page {
    margin: 0;
    background: var(--sf-bg);
    color: var(--sf-ink);
    font-family: var(--sf-font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.sfp-page ::selection { background: var(--sf-accent); color: var(--sf-accent-ink) }
.sfp-page :focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 3px; border-radius: 3px }
.sfp-page img { display: block; max-width: 100% }
.sfp-page h1, .sfp-page h2, .sfp-page h3 { margin: 0; font-family: var(--sf-font-display); font-weight: var(--sf-display-weight); letter-spacing: var(--sf-display-tracking); line-height: var(--sf-display-leading) }
.sfp-page p { margin: 0 }
:where(.sfp-page a) { color: inherit; text-decoration: none }

.sfp-shell { width: min(100% - 40px, 1360px); margin-inline: auto }
.sfp-section { padding-block: clamp(64px, 9vw, 132px) }
.sfp-section[id] { scroll-margin-top: 92px }

.sfp-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0; font-family: var(--sf-font-mono); font-size: .68rem; font-weight: 500;
    letter-spacing: var(--sf-label-tracking); text-transform: var(--sf-label-transform);
}
.sfp-eyebrow::before { width: 22px; height: 1px; background: currentColor; opacity: .55; content: '' }

.sfp-skip { position: absolute; left: -9999px; top: 0; z-index: 99; padding: 14px 20px; background: var(--sf-accent); color: var(--sf-accent-ink); font-weight: 700 }
.sfp-skip:focus { left: 12px; top: 12px }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.sfp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 26px; border: var(--sf-border) solid transparent; border-radius: var(--sf-radius-pill);
    font-family: var(--sf-font-body); font-size: .92rem; font-weight: 700; letter-spacing: .01em;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s, background .2s, color .2s, border-color .2s;
}
.sfp-btn svg, .sfp-btn i { font-style: normal; transition: transform .25s }
.sfp-btn:hover { transform: translateY(-2px) }
.sfp-btn:hover i { transform: translateX(3px) }
.sfp-btn:active { transform: translateY(0) }

.sfp-btn-primary { background: var(--sf-accent); color: var(--sf-accent-ink); box-shadow: 0 10px 26px color-mix(in srgb, var(--sf-accent) 34%, transparent) }
.sfp-btn-primary:hover { box-shadow: 0 18px 38px color-mix(in srgb, var(--sf-accent) 42%, transparent) }
.sfp-btn-light { background: var(--sf-hero-ink); color: var(--sf-hero-btn-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, .18) }
.sfp-btn-ghost { border-color: color-mix(in srgb, currentColor 34%, transparent); background: transparent; color: inherit }
.sfp-btn-ghost:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent) }
.sfp-btn-block { width: 100%; padding-block: 17px }

/* ── Sticky header ────────────────────────────────────────────────────── */

.sfp-nav {
    position: fixed; z-index: 40; inset: 0 0 auto;
    display: flex; align-items: center; gap: 22px;
    padding: 16px max(20px, calc((100vw - 1360px) / 2));
    color: var(--sf-hero-ink);
    transition: background .35s, color .35s, box-shadow .35s, padding .35s, backdrop-filter .35s;
}
.sfp-nav.is-stuck {
    padding-block: 11px; background: color-mix(in srgb, var(--sf-bg) 86%, transparent);
    color: var(--sf-ink); box-shadow: 0 1px 0 var(--sf-line), 0 10px 30px rgba(0, 0, 0, .06);
    backdrop-filter: saturate(1.6) blur(14px);
}
.sfp-nav-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: .95rem; letter-spacing: -.01em; text-decoration: none }
.sfp-nav-brand img { max-height: 34px; max-width: 150px; object-fit: contain }
.sfp-nav-links { display: flex; gap: 6px; margin-left: auto }
.sfp-nav-links a { padding: 9px 14px; border-radius: var(--sf-radius-pill); font-size: .86rem; font-weight: 600; text-decoration: none; opacity: .82; transition: background .2s, opacity .2s }
.sfp-nav-links a:hover { background: color-mix(in srgb, currentColor 12%, transparent); opacity: 1 }
.sfp-nav .sfp-btn { padding: 11px 20px; font-size: .84rem }
.sfp-nav.is-stuck .sfp-btn-light { background: var(--sf-accent); color: var(--sf-accent-ink) }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.sfp-hero {
    position: relative; isolation: isolate; display: grid; align-items: end;
    min-height: var(--sf-hero-min);
    padding: clamp(96px, 11vw, 150px) max(20px, calc((100vw - 1360px) / 2)) clamp(48px, 6vw, 84px);
    background: var(--sf-hero-bg); color: var(--sf-hero-ink);
}
.sfp-hero-media { position: absolute; z-index: -2; inset: 0; background-position: center; background-size: cover }
.sfp-hero.has-image .sfp-hero-media { background-image: var(--sf-hero-image) }
/* A photograph decides the contrast. Whatever colours a template gives its own
   hero, words set over an image are light on a darkened frame — otherwise the
   pale templates put near-black type on a dark photo. */
.sfp-page.has-hero-image:not([data-sf-hero="panel"]) { --sf-hero-ink: #fff; --sf-hero-soft: rgba(255, 255, 255, .84); --sf-hero-btn-ink: #12140f }
.sfp-page.has-hero-image:not([data-sf-hero="panel"]) .sfp-hero-media::after { background: var(--sf-hero-photo-overlay) }
.sfp-hero-media::after { position: absolute; inset: 0; background: var(--sf-hero-overlay); content: '' }
.sfp-hero:not(.has-image) .sfp-hero-media::after { opacity: .35 }
.sfp-hero-inner { display: grid; gap: 22px; max-width: 1360px; width: 100% }
.sfp-hero h1 { font-size: clamp(2.9rem, 7.4vw, 6.6rem); max-width: 16ch; text-wrap: balance }
.sfp-hero .sfp-lede { max-width: 54ch; font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.75; color: var(--sf-hero-soft) }
.sfp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px }
.sfp-hero-logo { max-height: 56px; max-width: 190px; margin-bottom: 4px; object-fit: contain; object-position: left }

.sfp-hero-facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 18px 0 0; padding: 0; list-style: none }
.sfp-hero-facts li { display: flex; align-items: baseline; gap: 9px; font-size: .84rem; color: var(--sf-hero-soft) }
.sfp-hero-facts b { font-family: var(--sf-font-display); font-size: 1.5rem; font-weight: var(--sf-display-weight); color: var(--sf-hero-ink); letter-spacing: -.03em }

/* Hero arrangements. Each one only re-flows .sfp-hero-inner. */

[data-sf-hero="split"] .sfp-hero-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px }
[data-sf-hero="split"] .sfp-hero-inner > :not(.sfp-hero-actions) { grid-column: 1 }
[data-sf-hero="split"] .sfp-hero-actions { grid-column: 2; grid-row: 2 / span 3; flex-direction: column; align-items: flex-start; margin: 0 }

[data-sf-hero="center"] .sfp-hero { place-items: center; text-align: center }
[data-sf-hero="center"] .sfp-hero-inner { justify-items: center; max-width: 900px }
[data-sf-hero="center"] .sfp-hero h1, [data-sf-hero="center"] .sfp-lede { max-width: none }
[data-sf-hero="center"] .sfp-hero-actions, [data-sf-hero="center"] .sfp-hero-facts { justify-content: center }
[data-sf-hero="center"] .sfp-eyebrow::before { display: none }
[data-sf-hero="center"] .sfp-hero-logo { object-position: center; margin-inline: auto }

/* The image becomes the hero's second column, so it sits beside the words
   rather than above them: .sfp-hero-media is a sibling of .sfp-hero-inner. */
[data-sf-hero="panel"] .sfp-hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: clamp(28px, 4vw, 66px); padding-block: clamp(104px, 10vw, 132px) clamp(56px, 6vw, 88px); background: var(--sf-bg); color: var(--sf-ink) }
[data-sf-hero="panel"] .sfp-hero-media { position: relative; z-index: 0; order: 2; inset: auto; align-self: stretch; min-height: clamp(320px, 40vw, 540px); overflow: hidden; border-radius: var(--sf-radius-lg); background-color: var(--sf-hero-bg) }
[data-sf-hero="panel"] .sfp-hero-media::after { background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .2)) }
[data-sf-hero="panel"] .sfp-hero-inner { max-width: none }
[data-sf-hero="panel"] .sfp-hero-text { display: grid; gap: 20px }
[data-sf-hero="panel"] .sfp-hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.7rem) }
[data-sf-hero="panel"] .sfp-lede { color: var(--sf-ink-soft) }
[data-sf-hero="panel"] .sfp-hero-facts li { color: var(--sf-ink-soft) }
[data-sf-hero="panel"] .sfp-hero-facts b { color: var(--sf-ink) }
[data-sf-hero="panel"] .sfp-btn-light { background: var(--sf-accent); color: var(--sf-accent-ink) }
[data-sf-hero="panel"] .sfp-nav:not(.is-stuck) { color: var(--sf-ink) }

[data-sf-hero="full"] .sfp-hero { --sf-hero-min: 92vh }
[data-sf-hero="full"] .sfp-hero-inner { max-width: 1100px }

/* ── Highlight ribbon ─────────────────────────────────────────────────── */

.sfp-ribbon { border-block: var(--sf-border) solid var(--sf-line); background: var(--sf-surface-2) }
.sfp-ribbon ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--sf-line) }
.sfp-ribbon li { display: flex; align-items: center; gap: 14px; padding: 26px 30px; background: var(--sf-surface-2) }
.sfp-ribbon span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--sf-accent) 16%, transparent); color: var(--sf-accent); font-size: .8rem; font-weight: 800 }
.sfp-ribbon b { font-size: .93rem; font-weight: 700; line-height: 1.45 }

/* ── Section head ─────────────────────────────────────────────────────── */

.sfp-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px) }
.sfp-head h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); text-wrap: balance }
.sfp-head p { color: var(--sf-ink-soft); font-size: 1.02rem }
.sfp-head .sfp-eyebrow { color: var(--sf-accent) }

/* ── Toolbar ──────────────────────────────────────────────────────────── */

.sfp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px) }
.sfp-search { display: flex; align-items: center; gap: 11px; flex: 1 1 260px; max-width: 360px; padding: 0 18px; border: var(--sf-border) solid var(--sf-line); border-radius: var(--sf-radius-pill); background: var(--sf-surface) }
.sfp-search span { color: var(--sf-ink-soft); font-size: 1.1rem }
.sfp-search input { width: 100%; padding: 14px 0; border: 0; outline: 0; background: transparent; color: inherit; font: 600 .9rem var(--sf-font-body) }
.sfp-search input::placeholder { color: var(--sf-ink-soft); font-weight: 500 }

.sfp-filters { display: flex; flex-wrap: wrap; gap: 8px }
.sfp-filters button {
    padding: 11px 17px; border: var(--sf-border) solid var(--sf-line); border-radius: var(--sf-radius-pill);
    background: transparent; color: var(--sf-ink-soft); font: 700 .8rem var(--sf-font-body); cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.sfp-filters button:hover { border-color: var(--sf-line-strong); color: var(--sf-ink) }
.sfp-filters button.is-active { border-color: transparent; background: var(--sf-accent); color: var(--sf-accent-ink) }
.sfp-count { margin-left: auto; font-family: var(--sf-font-mono); font-size: .74rem; letter-spacing: .08em; color: var(--sf-ink-soft); text-transform: uppercase }

/* ── Catalogue ────────────────────────────────────────────────────────── */

.sfp-grid { display: grid; gap: var(--sf-gap); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) }
.sfp-grid > [hidden] { display: none }

.sfp-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    border: var(--sf-border) solid var(--sf-line); border-radius: var(--sf-radius);
    background: var(--sf-surface); box-shadow: var(--sf-shadow);
    transition: box-shadow .3s, border-color .3s;
}
.sfp-card:hover { box-shadow: var(--sf-shadow-lift); border-color: var(--sf-line-strong) }

.sfp-media { position: relative; overflow: hidden; aspect-ratio: var(--sf-image-ratio); background: var(--sf-surface-2) }
.sfp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: var(--sf-image-filter); transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .3, 1) }
.sfp-media img.is-active { opacity: 1 }
.sfp-card:hover .sfp-media img.is-active { transform: scale(1.045) }
.sfp-media-empty { display: grid; place-items: center; height: 100%; background: linear-gradient(135deg, var(--sf-surface-2), var(--sf-surface)); color: var(--sf-ink-soft); font: 500 .7rem/1.6 var(--sf-font-mono); letter-spacing: .2em; text-align: center; text-transform: uppercase }

.sfp-gallery-nav { position: absolute; inset: auto 0 14px; display: flex; justify-content: center; gap: 6px; opacity: 0; transition: opacity .25s }
.sfp-card:hover .sfp-gallery-nav, .sfp-gallery-nav:focus-within { opacity: 1 }
.sfp-gallery-nav button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: background .2s, width .2s }
.sfp-gallery-nav button.is-active { width: 34px; background: #fff }

.sfp-badge { position: absolute; top: 14px; left: 14px; padding: 7px 12px; border-radius: var(--sf-radius-pill); background: color-mix(in srgb, var(--sf-surface) 82%, transparent); color: var(--sf-ink); font: 500 .64rem var(--sf-font-mono); letter-spacing: .13em; text-transform: uppercase; backdrop-filter: blur(10px) }
.sfp-price { position: absolute; top: 14px; right: 14px; display: grid; justify-items: end; padding: 9px 14px; border-radius: var(--sf-radius-sm); background: var(--sf-accent); color: var(--sf-accent-ink); line-height: 1.15; box-shadow: 0 8px 22px rgba(0, 0, 0, .18) }
.sfp-price small { font-size: .58rem; letter-spacing: .1em; opacity: .85; text-transform: uppercase }
.sfp-price b { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em }

.sfp-card-body { display: grid; gap: 12px; padding: clamp(20px, 2vw, 28px) }
.sfp-card-body h3 { font-size: clamp(1.45rem, 2vw, 1.95rem) }
.sfp-card-kicker { display: flex; align-items: center; gap: 8px; color: var(--sf-ink-soft); font: 500 .66rem var(--sf-font-mono); letter-spacing: .13em; text-transform: uppercase }
.sfp-card-kicker::before { width: 6px; height: 6px; border-radius: 50%; background: var(--sf-accent); content: '' }
.sfp-card-desc { display: -webkit-box; overflow: hidden; color: var(--sf-ink-soft); font-size: .93rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3 }

.sfp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none }
.sfp-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: var(--sf-border) solid var(--sf-line); border-radius: var(--sf-radius-pill); color: var(--sf-ink-soft); font-size: .73rem; font-weight: 600 }

.sfp-card-foot { margin-top: auto; padding: 0 clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) }
.sfp-soldout { display: block; padding: 15px; border: var(--sf-border) dashed var(--sf-line-strong); border-radius: var(--sf-radius-sm); color: var(--sf-ink-soft); font-size: .84rem; font-weight: 600; text-align: center }

/* ── Booking panel ────────────────────────────────────────────────────── */

.sfp-book { border-top: var(--sf-border) solid var(--sf-line); margin-top: 4px }
.sfp-book > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 18px; padding: 16px 22px; border-radius: var(--sf-radius-pill);
    background: var(--sf-accent); color: var(--sf-accent-ink);
    font-size: .92rem; font-weight: 700; cursor: pointer; list-style: none;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--sf-accent) 30%, transparent);
    transition: box-shadow .22s, transform .22s;
}
.sfp-book > summary::-webkit-details-marker { display: none }
.sfp-book > summary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--sf-accent) 38%, transparent) }
.sfp-book > summary i { font-style: normal; transition: transform .3s }
.sfp-book[open] > summary i { transform: rotate(90deg) }
.sfp-book[open] > summary { border-radius: var(--sf-radius-sm) }

.sfp-form { display: grid; gap: 14px; padding: 26px 0 4px; animation: sfp-slide .35s cubic-bezier(.2, .8, .3, 1) }
.sfp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.sfp-form label { display: grid; gap: 7px; font-family: var(--sf-font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-ink-soft) }
.sfp-form input, .sfp-form select {
    width: 100%; padding: 13px 14px; border: var(--sf-border) solid var(--sf-line); border-radius: var(--sf-radius-sm);
    background: var(--sf-bg); color: var(--sf-ink); font: 600 .9rem var(--sf-font-body); letter-spacing: 0; text-transform: none;
    transition: border-color .2s, box-shadow .2s;
}
.sfp-form input:focus, .sfp-form select:focus { outline: 0; border-color: var(--sf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-accent) 20%, transparent) }
.sfp-form input:user-invalid, .sfp-form select:user-invalid { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .12) }
.sfp-form button:disabled { cursor: not-allowed; opacity: .5; transform: none; box-shadow: none }
.sfp-fieldset { display: grid; gap: 14px; padding-top: 16px; border-top: var(--sf-border) solid var(--sf-line) }
.sfp-legend { display: flex; align-items: center; gap: 10px; color: var(--sf-ink-soft); font: 500 .64rem var(--sf-font-mono); letter-spacing: .14em; text-transform: uppercase }
.sfp-legend::after { flex: 1; height: 1px; background: var(--sf-line); content: '' }
.sfp-note { display: flex; align-items: center; gap: 8px; color: var(--sf-ink-soft); font-size: .76rem }

.sfp-msg { display: none; margin: -4px 0 0; font-size: .82rem; font-weight: 700; line-height: 1.45 }
.sfp-msg.is-visible, .sfp-msg.is-checking, .sfp-msg.is-unavailable, .sfp-msg.is-available { display: flex; align-items: center; gap: 7px }
.sfp-msg.is-visible, .sfp-msg.is-unavailable { color: #d92d20 }
.sfp-msg.is-checking { color: var(--sf-ink-soft) }
.sfp-msg.is-available { color: color-mix(in srgb, var(--sf-accent) 80%, var(--sf-ink)) }
.sfp-msg.is-checking::before { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sfp-spin .7s linear infinite; content: '' }

.sfp-hidden-field[hidden] { display: none !important }

/* ── Details section ──────────────────────────────────────────────────── */

.sfp-info { border-top: var(--sf-border) solid var(--sf-line) }
.sfp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sf-gap) }
.sfp-fact { display: grid; gap: 8px; padding: 28px; border: var(--sf-border) solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-surface) }
.sfp-fact span { color: var(--sf-accent); font-size: 1.3rem }
.sfp-fact b { font-family: var(--sf-font-display); font-size: 1.45rem; font-weight: var(--sf-display-weight); letter-spacing: -.02em }
.sfp-fact small { color: var(--sf-ink-soft); font-size: .85rem; line-height: 1.6 }

/* ── Footer ───────────────────────────────────────────────────────────── */

.sfp-foot { padding-block: 44px; border-top: var(--sf-border) solid var(--sf-line); color: var(--sf-ink-soft) }
.sfp-foot .sfp-shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px }
.sfp-foot b { color: var(--sf-ink); font-family: var(--sf-font-display); font-size: 1.15rem; font-weight: var(--sf-display-weight) }
.sfp-foot small { font-size: .78rem }

/* ── Sticky mobile dock ───────────────────────────────────────────────── */

.sfp-dock {
    position: fixed; z-index: 35; inset: auto 0 0; display: none; align-items: center; gap: 14px;
    padding: 13px 18px calc(13px + env(safe-area-inset-bottom));
    border-top: var(--sf-border) solid var(--sf-line);
    background: color-mix(in srgb, var(--sf-bg) 92%, transparent);
    backdrop-filter: blur(14px);
    transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}
.sfp-dock.is-visible { transform: none }
.sfp-dock div { display: grid; line-height: 1.25 }
.sfp-dock small { color: var(--sf-ink-soft); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase }
.sfp-dock b { font-size: .96rem; font-weight: 800 }
.sfp-dock .sfp-btn { margin-left: auto; padding: 13px 22px }

/* ── Notices ──────────────────────────────────────────────────────────── */

.sfp-alert { display: flex; align-items: center; gap: 12px; margin: 26px auto 0; padding: 16px 20px; border-radius: var(--sf-radius); background: color-mix(in srgb, #d92d20 12%, var(--sf-surface)); color: color-mix(in srgb, #d92d20 78%, var(--sf-ink)); font-size: .92rem; font-weight: 600 }
.sfp-alert span { font-size: 1.1rem }
.sfp-preview-flag { position: fixed; z-index: 60; left: 50%; bottom: 22px; padding: 10px 20px; border-radius: var(--sf-radius-pill); background: var(--sf-ink); color: var(--sf-bg); font: 700 .74rem var(--sf-font-body); letter-spacing: .14em; text-transform: uppercase; transform: translateX(-50%); box-shadow: 0 12px 34px rgba(0, 0, 0, .3) }
.sfp-empty { padding: 64px 20px; color: var(--sf-ink-soft); font-size: 1rem; text-align: center }

/* ── Confirmation ─────────────────────────────────────────────────────── */

.sfp-result { display: grid; place-items: center; min-height: 100vh; padding: 40px 20px; text-align: center }
.sfp-result-inner { display: grid; gap: 20px; justify-items: center; max-width: 620px }
.sfp-result h1 { font-size: clamp(2.4rem, 6vw, 4.4rem) }
.sfp-result p { color: var(--sf-ink-soft); font-size: 1.05rem }
.sfp-result-mark { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: color-mix(in srgb, var(--sf-accent) 15%, transparent); color: var(--sf-accent); font-size: 2.2rem }

/* ── Motion ───────────────────────────────────────────────────────────── */

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .8, .3, 1), transform .7s cubic-bezier(.2, .8, .3, 1) }
[data-reveal].is-in { opacity: 1; transform: none }

@keyframes sfp-slide { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
@keyframes sfp-spin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
    .sfp-page *, .sfp-page *::before, .sfp-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
    [data-reveal] { opacity: 1; transform: none }
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    [data-sf-hero="split"] .sfp-hero-inner { grid-template-columns: 1fr }
    [data-sf-hero="split"] .sfp-hero-actions { grid-column: 1; grid-row: auto; flex-direction: row }
    [data-sf-hero="panel"] .sfp-hero { grid-template-columns: 1fr }
    [data-sf-hero="panel"] .sfp-hero-media { order: -1; min-height: 300px }
}

@media (max-width: 760px) {
    .sfp-shell { width: min(100% - 32px, 1360px) }
    .sfp-nav-links { display: none }
    .sfp-nav { padding-inline: 16px }
    .sfp-hero { --sf-hero-min: 78vh; padding-inline: 16px }
    .sfp-hero h1 { font-size: clamp(2.6rem, 11vw, 4rem) }
    .sfp-hero-facts { gap: 8px 22px }
    .sfp-hero-facts b { font-size: 1.25rem }
    .sfp-grid { grid-template-columns: 1fr }
    .sfp-form-grid { grid-template-columns: 1fr }
    .sfp-count { width: 100%; margin-left: 0 }
    .sfp-dock { display: flex }
    .sfp-section[id] { scroll-margin-top: 74px }
}

/* ── Idioma, preguntas, contacto y pie ───────────────────────────────────── */

/* El selector vive junto al CTA de la barra: es una decisión de una sola vez,
   así que pesa menos que el botón de reservar y no compite con él. */
.sfp-langs { display: flex; gap: 2px; margin-left: 10px }
.sfp-langs a { padding: 6px 8px; border-radius: var(--sf-radius-pill); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; opacity: .5; transition: background .2s, opacity .2s }
.sfp-langs a:hover { opacity: .9 }
.sfp-langs a.is-active { background: color-mix(in srgb, currentColor 14%, transparent); opacity: 1 }

.sfp-note-cancel { color: var(--sf-ink-soft) }

/* El consentimiento se lee antes de pulsar, no después: por eso va pegado al
   botón y no sólo en el pie. */
.sfp-consent { margin: 6px 0 0; color: var(--sf-ink-soft); font-size: .72rem; line-height: 1.5 }
.sfp-consent a { color: inherit; text-underline-offset: 2px }

.sfp-faq-list { display: grid; gap: 10px; max-width: 760px; margin-inline: auto }
.sfp-faq-list details { border: var(--sf-border) solid var(--sf-line); border-radius: var(--sf-radius-card); background: var(--sf-surface) }
.sfp-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-weight: 700; cursor: pointer; list-style: none }
.sfp-faq-list summary::-webkit-details-marker { display: none }
.sfp-faq-list summary::marker { content: '' }
.sfp-faq-list summary i { flex: none; font-style: normal; font-size: 1.1rem; opacity: .45; transition: transform .2s }
.sfp-faq-list details[open] summary i { transform: rotate(45deg) }
.sfp-faq-list p { margin: 0; padding: 0 20px 18px; color: var(--sf-ink-soft); line-height: 1.6 }

.sfp-contact-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; padding: 0; list-style: none }
.sfp-contact-list li { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border: var(--sf-border) solid var(--sf-line); border-radius: var(--sf-radius-pill); background: var(--sf-surface) }
.sfp-contact-list span[aria-hidden] { opacity: .5 }
.sfp-contact-list a { color: inherit; text-decoration: none }
.sfp-contact-list a:hover { text-decoration: underline; text-underline-offset: 3px }

.sfp-foot-legal { display: flex; gap: 14px }
.sfp-foot-legal a { color: inherit; font-size: .78rem; text-decoration: none; opacity: .8 }
.sfp-foot-legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px }

/* Presente pero sin pelearse con la marca del cliente, que es de quien es la
   página. */
.sfp-powered { width: 100%; padding-top: 10px; border-top: var(--sf-border) solid var(--sf-line); font-size: .72rem; opacity: .6; text-align: center }
.sfp-powered a { color: inherit; font-weight: 700; text-decoration: none }
.sfp-powered a:hover { text-decoration: underline; text-underline-offset: 3px }

@media (max-width: 640px) {
    .sfp-langs { margin-left: 4px }
    .sfp-contact-list li { width: 100% }
}

/* Página de documento legal. Una columna estrecha porque esto se lee, no se
   escanea. */
.sfp-legal-page { max-width: 760px }
.sfp-legal-page h1 { margin: 6px 0 24px }
.sfp-legal-body { color: var(--sf-ink-soft); font-size: .95rem; line-height: 1.75 }

/* La casilla de aceptación: visible sin gritar, y con el texto alineado al
   principio porque la frase ocupa dos líneas en cuanto hay dos enlaces. */
/* .sfp-form label es display:grid y gana por especificidad a una sola clase,
   de ahí el selector doble: si no, la casilla cae en su propia fila. */
.sfp-form label.sfp-consent-check { display: flex; align-items: flex-start; gap: 9px; text-align: left; cursor: pointer }
.sfp-consent-check input { flex: none; width: auto; margin-top: 1px; accent-color: var(--sf-accent) }
.sfp-consent-check a { color: inherit; text-decoration: underline; text-underline-offset: 2px }

/* ── Paso de servicios ───────────────────────────────────────────────────── */
.sfp-extras { max-width: 640px }
.sfp-extras .sfp-head { text-align: left }
.sfp-extras-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 14px 18px; border: var(--sf-border) solid var(--sf-line); border-radius: var(--sf-radius-card); background: var(--sf-surface); color: var(--sf-ink-soft); font-size: .86rem }
.sfp-extras-summary b { color: var(--sf-ink) }

.sfp-extras-list { margin: 18px 0 0; padding: 0; list-style: none }
.sfp-extras-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: var(--sf-border) solid var(--sf-line) }
.sfp-extra-text { display: grid; gap: 2px }
.sfp-extra-text small { color: var(--sf-ink-soft); font-size: .78rem }
.sfp-extras-list input { width: 72px; flex: none; text-align: center }

.sfp-extras-total { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0; border-top: var(--sf-border) solid var(--sf-line); border-bottom: var(--sf-border) solid var(--sf-line) }
.sfp-extras-total b { font-family: var(--sf-font-display); font-size: 1.4rem; font-weight: var(--sf-display-weight) }

.sfp-extras-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px }

@media (max-width: 560px) {
    .sfp-extras-actions { flex-direction: column-reverse }
    .sfp-extras-actions .sfp-btn { width: 100%; justify-content: center }
}
.sfp-alert.is-ok { border-color: color-mix(in srgb, var(--sf-accent) 40%, transparent) }