html {
    scroll-behavior:smooth;
    scroll-padding-top:110px}
body {
    font-family:Arial,Helvetica,sans-serif}
h1,h2,h3 {
    font-family:Georgia,'Times New Roman',serif}
a,button,input,select {
    transition:background-color .2s,box-shadow .2s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
    outline:3px solid var(--yw-accent);
    outline-offset:4px}
header nav a {
    padding-block:8px}
header nav a:hover {
    box-shadow:0 2px var(--yw-accent)}
main h1 {
    line-height:1.12}
main section {
    overflow-wrap:break-word}
.hotel-gallery {
    position:relative;
    height:240px;
    overflow:hidden;
    border-radius:12px;
    background:var(--yw-surface);
    margin-bottom:20px;
    isolation:isolate}
.hotel-slide {
    position:absolute;
    width:100%;
    height:100%;
    inset:0;
    object-fit:cover;
    opacity:0;
    transition:none}
.hotel-slide.is-active {
    opacity:1}
.hotel-gallery-controls {
    position:absolute;
    bottom:16px;
    right:16px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    z-index:3;
    background:rgba(26, 68, 74, 0.851);
    border-radius:30px;
    padding:4px;
    font-size:12px}
.hotel-gallery-controls button {
    width:40px;
    height:40px;
    border-radius:50%;
    font-size:20px}
.hotel-gallery-controls button:hover {
    background:var(--yw-primary)}
.hotel-reference {
    position:absolute;
    left:16px;
    bottom:16px;
    color:#fff;
    background:rgba(26, 68, 74, 0.722);
    border-radius:4px;
    padding:4px 8px;
    font-size:10px;
    letter-spacing:.04em}
.hotel-hero {
    position:relative;
    background:var(--yw-dark);
    color:white;
    isolation:isolate}
.hotel-hero>.hotel-gallery {
    position:absolute;
    inset:0;
    height:100%;
    margin:0;
    border-radius:0;
    z-index:-1}
.hotel-hero>.hotel-gallery:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(26, 68, 74, 0.918),rgba(26, 68, 74, 0.502) 55%,rgba(26, 68, 74, 0.133));
    pointer-events:none}
.hotel-hero-copy {
    max-width:1280px;
    margin:auto;
    padding:100px 24px 110px;
    pointer-events:none}
.hotel-hero-copy>div {
    max-width:670px}
.hotel-hero-copy a {
    pointer-events:auto}
.hotel-hero h1 {
    font-size:clamp(2.6rem,4.7vw,4.8rem);
    font-weight:400;
    letter-spacing:-.025em}
.hotel-hero p {
    color:var(--yw-bg)}
.hotel-eyebrow {
    text-transform:uppercase;
    letter-spacing:.25em;
    font-size:12px;
    margin-bottom:22px}
.hotel-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px}
.hotel-actions a {
    padding:14px 24px;
    border:1px solid var(--yw-accent);
    border-radius:4px}
.hotel-actions a:first-child {
    background:var(--yw-accent);
    color:var(--yw-text);
    font-weight:700}
.hotel-search {
    background:var(--yw-surface)!important;
    color:var(--yw-dark)!important;
    border-bottom:1px solid var(--yw-border)}
.hotel-search input {
    border-radius:5px}
.hotel-search button {
    background:var(--yw-primary)!important}
.hotel-feature {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:48px;
    align-items:center}
.hotel-feature .hotel-gallery {
    height:430px;
    margin:0}
.hotel-feature h2 {
    font-size:clamp(2rem,3vw,3rem);
    line-height:1.15;
    margin-bottom:20px}
.hotel-feature p {
    line-height:1.8;
    color:var(--yw-primary)}
.hotel-room-summary>.hotel-gallery {
    height:190px}
.hotel-mobile-nav[hidden] {
    display:none}
.hotel-mobile-nav {
    padding:16px 24px;
    border-top:1px solid var(--yw-surface)}
.hotel-mobile-nav a {
    display:block;
    padding:10px 0}
.hotel-menu-toggle {
    display:none}
#busqueda {
    scroll-margin-top:100px}
@media(max-width:1023px) {
    .hotel-menu-toggle {
    display:block;
    padding:8px;
    font-size:23px}
.hotel-feature {
    gap:24px}
.hotel-hero-copy {
    padding-top:70px}
}
@media(min-width:1024px) {
    .hotel-mobile-nav {
    display:none}
}
@media(max-width:767px) {
    header>div {
    gap:8px;
    padding-left:16px!important;
    padding-right:16px!important}
header a span:first-child {
    font-size:16px}
header a span:nth-child(2) {
    font-size:9px}
.hotel-hero-copy {
    padding:60px 24px 100px}
.hotel-hero h1 {
    font-size:2.7rem}
.hotel-feature {
    grid-template-columns:1fr}
.hotel-feature .hotel-gallery {
    height:290px}
.hotel-search form {
    grid-template-columns:1fr 1fr}
.hotel-search form button {
    grid-column:1/-1}
.hotel-search label {
    font-size:12px;
    min-height:32px}
main h1.text-5xl {
    font-size:2.3rem}
.hotel-gallery {
    height:220px}
.hotel-reference {
    max-width:40%}
}
@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto}
}


/* Boutique presentation: the search form keeps its existing GET contract. */
.hotel-hero { min-height: 80svh; display: grid; place-items: center; }
.hotel-hero-copy { width: 100%; padding: 100px 24px 150px; text-align: center; }
.hotel-hero-copy > div { max-width: 900px; margin-inline: auto; }
.hotel-hero h1 { font-size: clamp(3rem, 6.8vw, 7rem); }
.hotel-hero-copy p { max-width: 630px; margin-inline: auto; }
.hotel-hero .hotel-actions { justify-content: center; }
.hotel-hero > .hotel-gallery:after { background: linear-gradient(180deg, rgba(26, 68, 74, 0.200), rgba(26, 68, 74, 0.533) 50%, rgba(26, 68, 74, 0.722)); }
.hotel-hero .hotel-gallery-controls { bottom: 90px; }
.hotel-search { position: relative; z-index: 5; max-width: 1160px; margin: -48px auto 0; border: 1px solid var(--yw-border); border-radius: 12px; box-shadow: 0 18px 50px rgba(17, 17, 17, 0.102); }
.hotel-search > div { padding: 26px; }
.hotel-room-card { background: #fff; border: 1px solid var(--yw-surface); border-radius: 12px; overflow: hidden; transition: box-shadow .4s; }
.hotel-room-card:hover { box-shadow: 0 16px 35px rgba(17, 17, 17, 0.102); }
.hotel-room-card .hotel-gallery { border-radius: 0; margin: 0; }


.hotel-card-cta { display: inline-block; padding: 12px 22px; color: #fff; background: var(--yw-primary); border-radius: 4px; }
.hotel-card-cta:hover { background: var(--yw-dark); }
.hotel-dots { display: flex; gap: 7px; padding: 0 5px; }
.hotel-gallery-controls .hotel-dots button { width: 8px; height: 8px; padding: 0; background: #ffffff66; font-size: 0; }
.hotel-gallery-controls .hotel-dots button[aria-current="true"] { background: #fff; }
.hotel-location { text-align: center; border-top: 1px solid var(--yw-surface); }

/* Static chapters are the default, also used for mobile and reduced motion. */
.hotel-story { background: var(--yw-surface); --stage-height: calc(100svh - 110px); }
.hotel-story-panel { position: relative; min-height: 520px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; isolation: isolate; }
.hotel-story-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hotel-story-panel:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26, 68, 74, 0.910), rgba(26, 68, 74, 0.125)); z-index: -1; }
.hotel-story-copy { max-width: 760px; padding: 64px; }
.hotel-story-copy h3 { font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.15; margin: 16px 0; }
.hotel-story-copy p { font-size: 18px; line-height: 1.7; max-width: 560px; }
.hotel-story-track, .hotel-story-progress { display: none; }
.story-enhanced .hotel-story-stage { position: sticky; top: 90px; height: var(--stage-height); z-index: 1; }
.story-enhanced .hotel-story-panel { position: absolute; inset: 0; min-height: 0; opacity: 0; transition: opacity .7s; pointer-events: none; }
.story-enhanced .hotel-story-panel.is-active { opacity: 1; }
.story-enhanced .hotel-story-panel > img { transform: scale(1.025); transition: transform 1.2s; }
.story-enhanced .hotel-story-panel.is-active > img { transform: scale(1); }
.story-enhanced .hotel-story-copy { transform: translateY(24px); transition: transform .7s; }
.story-enhanced .is-active .hotel-story-copy { transform: translateY(0); }
.story-enhanced .hotel-story-track { display: block; margin-top: calc(-1 * var(--stage-height)); }
.story-enhanced [data-story-step] { height: 90vh; }
.story-enhanced .hotel-story-progress { display: block; position: absolute; bottom: 24px; left: 64px; width: 180px; height: 2px; background: #ffffff55; }
.hotel-story-progress span { display: block; height: 100%; width: 25%; background: var(--yw-accent); transition: width .7s; }
.reveal-ready { opacity: 0; transform: translateY(24px); transition: opacity .65s, transform .65s; }
.reveal-ready[data-reveal="left"] { transform: translateX(-24px); }
.reveal-ready[data-reveal="right"] { transform: translateX(24px); }
.reveal-ready.is-visible, .reveal-ready:focus-within { opacity: 1; transform: none; }
@media (max-width: 1023px) {
    .hotel-search { margin: -32px 20px 0; }
    .hotel-story-panel { min-height: 500px; }
    .hotel-story-copy { padding: 40px 24px; }
}
@media (max-width: 767px) {
    .hotel-hero { min-height: 70svh; }
    .hotel-hero-copy { padding: 70px 24px 145px; }
    .hotel-hero h1 { font-size: 3.1rem; }
    .hotel-hero .hotel-gallery-controls { bottom: 55px; }
    .hotel-search form { grid-template-columns: 1fr; }
    .hotel-search label { min-height: 0; }
    .hotel-search > div { padding: 22px; }
    .hotel-story-panel { min-height: 480px; }
    .hotel-story-copy h3 { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal-ready { opacity: 1; transform: none !important; }
    .hotel-story-panel, .hotel-story-copy, .hotel-story-panel > img, .hotel-story-progress span, .reveal-ready, .hotel-room-card { transition: none !important; }
}
/* Keep discreet dots easy to reach with touch and keyboard. */
.hotel-gallery-controls .hotel-dots button { width: 24px; height: 24px; background: transparent; display: grid; place-items: center; }
.hotel-gallery-controls .hotel-dots button:before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ffffff66; }
.hotel-gallery-controls .hotel-dots button[aria-current="true"] { background: transparent; }
.hotel-gallery-controls .hotel-dots button[aria-current="true"]:before { background: #fff; }

/* Shared interior-page photography and editorial services. */
.hotel-icon { color: var(--yw-primary); flex-shrink: 0; margin-bottom: 18px; }
.hotel-page-hero { position: relative; isolation: isolate; min-height: 38vh; color: white; display: flex; align-items: center; background: var(--yw-text); }
.hotel-page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hotel-page-hero:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(26, 68, 74, 0.871),rgba(26, 68, 74, 0.333)); z-index: -1; }
.hotel-page-hero-copy { width: 100%; padding-block: 60px; }
.hotel-page-hero h1 { font-size: clamp(2.6rem,4.5vw,4rem); font-weight: 400; max-width: 800px; }
.hotel-page-subtitle { max-width: 680px; line-height: 1.75; margin-top: 20px; color: var(--yw-bg); }
.hotel-editorial-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 48px; }
.hotel-editorial-row .hotel-gallery { height: 440px; margin: 0; }
.hotel-editorial-row:nth-child(even) > .hotel-gallery { order: 2; }
.hotel-values { border-top: 1px solid var(--yw-border); padding-top: 28px; }
.hotel-service-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 44px; }
.hotel-service-tabs button { display: flex; align-items: center; gap: 10px; padding: 13px 24px; border: 1px solid var(--yw-border); border-radius: 40px; color: var(--yw-primary); }
.hotel-service-tabs .hotel-icon { margin: 0; width: 24px; height: 24px; color: inherit; }
.hotel-service-tabs [aria-selected="true"] { background: var(--yw-primary); color: white; border-color: var(--yw-primary); }
[data-service-panel][hidden], [data-deck-controls][hidden] { display: none; }
[data-service-panel]:not([hidden]) { animation: service-enter .5s ease both; }
.hotel-service-slide { position: relative; display: grid; grid-template-columns: 56% 44%; min-height: 530px; background: var(--yw-bg); margin-bottom: 32px; }
.hotel-service-photo { position: relative; min-width: 0; }
.hotel-service-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.hotel-service-photo:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 55%,var(--yw-bg)); }
.hotel-service-copy { align-self: center; padding: 36px 30px 36px 12px; color: var(--yw-text); }
.hotel-service-copy h3 { font-size: clamp(1.8rem,2.8vw,2.6rem); line-height: 1.2; margin-bottom: 20px; }
.hotel-service-description { color: var(--yw-primary); line-height: 1.8; margin-bottom: 24px; }
.hotel-service-price { font-family: Georgia,serif; font-size: 2.4rem; margin-block: 6px; }
.hotel-service-detail { color: var(--yw-primary); font-size: 14px; line-height: 1.7; margin-bottom: 28px; }



.hotel-deck-controls { display: grid; grid-template-columns: 44px 70px 44px; justify-content: center; align-items: center; gap: 14px; padding-top: 26px; text-align: center; color: var(--yw-primary); }
.hotel-deck-controls > button { border: 1px solid var(--yw-border); border-radius: 50%; width: 44px; height: 44px; font-size: 22px; }
.hotel-deck-controls button:hover { background: var(--yw-surface); }
.hotel-deck-dots { grid-column: 1/-1; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; }
.hotel-deck-dots button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.hotel-deck-dots button:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--yw-border); }
.hotel-deck-dots button[aria-current="true"]:before { background: var(--yw-primary); }
.hotel-contact-detail { display: flex; align-items: flex-start; gap: 16px; padding-block: 20px; border-top: 1px solid var(--yw-surface); }
.hotel-contact-form { background: white; padding: 32px; border-top: 3px solid var(--yw-accent); }
.hotel-map-space { padding: 32px; background: var(--yw-surface); margin-top: 24px; }
@keyframes service-enter { from {opacity: 0; transform: translateY(12px);} to {opacity: 1; transform: none;} }
@media(max-width: 767px) {
    .hotel-page-hero { min-height: 34vh; }
    .hotel-page-hero-copy { padding-block: 44px; }
    .hotel-editorial-row { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; }
    .hotel-editorial-row:nth-child(even) > .hotel-gallery { order: 0; }
    .hotel-editorial-row .hotel-gallery { height: 280px; }
    .hotel-service-tabs { gap: 8px; margin-bottom: 28px; }
    .hotel-service-tabs button { padding: 10px 14px; font-size: 13px; }
    .hotel-service-tabs .hotel-icon { width: 20px; height: 20px; }
    .hotel-service-slide { grid-template-columns: 1fr; grid-template-rows: 260px auto; min-height: 0; }
    .hotel-service-photo:after { background: linear-gradient(0deg,var(--yw-bg),transparent 35%); }
    .hotel-service-copy { padding: 24px 8px; }
    .hotel-service-copy h3 { font-size: 2rem; }
    .hotel-contact-form { padding: 24px; }
}
@media(prefers-reduced-motion: reduce) {
    [data-service-panel]:not([hidden]) { animation: none; }
}

/* Persistent slides: opacity on hero, one translating flex track everywhere else. */
.hotel-carousel-track { display: flex; width: 100%; height: 100%; transition: transform 2s ease-in-out; will-change: transform; }
.hotel-carousel-track > .hotel-slide { position: relative; inset: auto; min-width: 100%; flex: 0 0 100%; opacity: 1; visibility: visible; transform: none; transition: none; }
.hotel-hero .hotel-carousel-track { position: absolute; inset: 0; display: block; transform: none; transition: none; }
.hotel-hero .hotel-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1.5s ease-in-out; }
.hotel-hero .hotel-slide.is-active { opacity: 1; }
.hotel-carousel-viewport { overflow: hidden; }
.deck-enhanced .hotel-service-slides { display: flex; width: 100%; transition: transform 2s ease-in-out; will-change: transform; }
.deck-enhanced .hotel-service-slide { flex: 0 0 100%; min-width: 100%; margin: 0; opacity: 1; visibility: visible; transform: none; transition: none; }
.hotel-deck-controls { grid-template-columns: 44px 70px 44px 44px; }
/* Respect the explicit OS preference; no blanket !important carousel overrides. */
@media (prefers-reduced-motion: reduce) {
    .hotel-carousel-track, .hotel-hero .hotel-slide, .deck-enhanced .hotel-service-slides { transition: none; }
}

/* Brand colors only; carousel timing and motion rules stay unchanged. */
.hotel-service-description, .hotel-service-detail { color: var(--yw-muted); }
.hotel-gallery-controls .hotel-dots button[aria-current="true"]:before { background: var(--yw-highlight); }
.hotel-deck-dots button[aria-current="true"]:before { background: var(--yw-primary); }
.hotel-hero-copy > a:first-of-type { color: var(--yw-dark); }

/* One existing search form, sticky throughout the main page below the real header. */
#busqueda.hotel-search {
    position: sticky;
    top: var(--hotel-header-height, 90px);
    z-index: 40;
    background: var(--yw-bg) !important;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--yw-border);
    box-shadow: 0 5px 18px rgba(17, 17, 17, .12);
    scroll-margin-top: var(--hotel-header-height, 90px);
}
#busqueda.hotel-search button { color: var(--yw-white); }
@media (max-width: 767px) {
    #busqueda.hotel-search { max-height: 36svh; overflow-y: auto; }
    #busqueda.hotel-search > div { padding: 10px 14px; }
    #busqueda.hotel-search form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #busqueda.hotel-search label { font-size: 12px; line-height: 1.25; }
    #busqueda.hotel-search input { min-width: 0; padding: 7px; }
    #busqueda.hotel-search button { grid-column: 1 / -1; padding: 8px; }
}