/* Sora Wellness · calma, luz natural y tonos arena */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(fonts/fraunces.woff2) format("woff2") }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 600; font-display: swap; src: url(fonts/fraunces-italic.woff2) format("woff2") }
.sw {
  --sand: #efe9df; --paper: #f8f5ef; --white: #fffdf9; --sage: #4f6553; --sage-2: #dfe5dc; --ink: #2b2f2a; --ink-2: #555b53; --clay: #9b6b4f; --line: rgba(43, 47, 42, .14);
  --serif: "Fraunces", Georgia, serif; --sans: "Inter Tight", system-ui, sans-serif;
  margin: 0; background: var(--sand); color: var(--ink); font: 400 16.5px/1.65 var(--sans); -webkit-font-smoothing: antialiased
}
.sw *, .sw *::before, .sw *::after { box-sizing: border-box }
.sw img { display: block; max-width: 100%; height: auto }
.sw a { color: inherit }
.sw h1, .sw h2, .sw h3, .sw p, .sw ul, .sw ol, .sw figure, .sw dl, .sw dd { margin: 0 }
.sw button, .sw input, .sw textarea, .sw select { font: inherit; color: inherit }
.sw :focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 6px }
.sw em { font-family: var(--serif); font-style: italic; font-weight: 300 }
.sw .sw-w { width: min(1220px, 100% - clamp(36px, 7vw, 100px)); margin-inline: auto }

.sw-hd { position: sticky; top: 0; z-index: 40; background: rgba(239, 233, 223, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.sw-hd-in { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px }
.sw-logo { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; text-decoration: none; letter-spacing: -.01em }
.sw-logo span { font-family: var(--sans); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; margin-left: 8px; color: var(--sage) }
.sw-nav { display: flex; align-items: center; gap: 28px; font-size: .95rem }
.sw-nav a:not(.sw-btn) { text-decoration: none }
.sw-nav a:not(.sw-btn):hover { color: var(--sage); text-decoration: underline; text-underline-offset: 5px }
.sw .sw-menu { display: none; border: 1px solid var(--line); background: var(--white); border-radius: 100px; padding: 8px 16px; cursor: pointer }
@media (max-width: 860px) {
  .sw .sw-menu { display: block }
  .sw-nav { position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); padding: 6px 24px 22px; border-bottom: 1px solid var(--line) }
  .sw-nav a:not(.sw-btn) { padding: 14px 0; border-bottom: 1px solid var(--line) }
  .sw-nav .sw-btn { margin-top: 14px }
  .js .sw-nav:not(.open) { display: none }
}
.sw .sw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 100px; background: var(--sage); color: var(--white); text-decoration: none; border: 0; cursor: pointer; font-weight: 500; transition: background .3s, transform .3s }
.sw .sw-btn:hover { background: var(--ink) }
.sw .sw-btn:active { transform: scale(.97) }
.sw .sw-btn.sm { min-height: 42px; padding: 0 18px; font-size: .9rem }
.sw .sw-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--sage); font-weight: 500; text-decoration: underline; text-underline-offset: 4px }
.sw .sw-link:hover { color: var(--ink) }

/* Hero */
.sw-hero { padding: clamp(40px, 6vw, 80px) 0 0 }
.sw-hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center }
.sw-eyebrow { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage) }
.sw-hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(3.2rem, 7.6vw, 7.2rem); line-height: .95; letter-spacing: -.03em; margin: 18px 0 26px }
.sw-hero-txt > p:not(.sw-eyebrow) { color: var(--ink-2); max-width: 38ch; font-size: 1.1rem }
.sw-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 34px }
.sw-hero-img { border-radius: 300px 300px 24px 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sage-2) }
.sw-hero-img img { width: 100%; height: 100%; object-fit: cover }
.js .sw-hero-img img { animation: soft 2s cubic-bezier(.16, 1, .3, 1) both }
@keyframes soft { from { transform: scale(1.1); opacity: .4 } }
.js .sw-hero-txt > * { animation: rise 1.2s cubic-bezier(.16, 1, .3, 1) both }
.js .sw-hero-txt > :nth-child(2) { animation-delay: .1s } .js .sw-hero-txt > :nth-child(3) { animation-delay: .2s } .js .sw-hero-txt > :nth-child(4) { animation-delay: .3s }
@keyframes rise { from { opacity: 0; transform: translateY(20px) } }
@media (max-width: 860px) { .sw-hero-in { grid-template-columns: 1fr } .sw-hero-img { max-width: 440px; width: 100%; justify-self: center; aspect-ratio: 1 } }
.sw-strip { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(50px, 7vw, 90px); border-top: 1px solid var(--line) }
.sw-strip li { padding: 22px 20px 26px 0; display: grid; gap: 4px; font-size: .96rem }
.sw-strip span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage) }
@media (max-width: 760px) { .sw-strip { grid-template-columns: 1fr } .sw-strip li { border-bottom: 1px solid var(--line); padding: 16px 0 } }

/* Secciones */
.sw-trt, .sw-space, .sw-team, .sw-faq, .sw-contact { padding: clamp(70px, 10vw, 130px) 0 }
.sw-trt { background: var(--paper) }
.sw-sh { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 30px }
.sw-sh p { color: var(--ink-2); max-width: 40ch }
.sw h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.025em }
.sw-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px }
.sw .sw-tabs button { border: 1px solid var(--line); background: var(--white); border-radius: 100px; padding: 9px 18px; cursor: pointer; transition: background .25s, color .25s }
.sw .sw-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink) }
.sw-tlist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px }
@media (max-width: 1100px) { .sw-tlist { grid-template-columns: 1fr 1fr } }
@media (max-width: 600px) { .sw-tlist { grid-template-columns: 1fr } }
.sw-t[hidden] { display: none }
.sw-t { background: var(--white); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--line) }
.sw-t-img { aspect-ratio: 4 / 3; overflow: hidden }
.sw-t-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) }
.sw-t:hover .sw-t-img img { transform: scale(1.05) }
.sw-t-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.sw-t-cat { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage) }
.sw-t h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.1 }
.sw-t-body > p:not(.sw-t-cat) { color: var(--ink-2); font-size: .95rem }
.sw-t-ft { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line) }
.sw-note { color: var(--ink-2); font-size: .86rem; margin-top: 30px; max-width: 70ch }

/* Reserva */
.sw-book { padding: clamp(70px, 10vw, 130px) 0; background: var(--sage); color: var(--white) }
.sw-book-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: start }
.sw-book-l { position: sticky; top: 100px; display: grid; gap: 18px }
.sw-book-l > p { color: #e3e9e1 }
.sw-sum { background: rgba(255, 253, 249, .1); border: 1px solid rgba(255, 253, 249, .22); border-radius: 18px; padding: 22px }
.sw-sum h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin-bottom: 10px }
.sw-sum dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255, 253, 249, .18); font-size: .95rem }
.sw-sum dt { color: #fff; opacity: 1 }
.sw-sum dd { text-align: right; font-weight: 500 }
@media (max-width: 900px) { .sw-book-in { grid-template-columns: 1fr } .sw-book-l { position: static } }
.sw-form { display: grid; gap: 16px }
.sw-book .sw-form { background: var(--paper); color: var(--ink); border-radius: 24px; padding: clamp(20px, 3vw, 36px) }
.sw-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: s; margin-bottom: 6px }
.sw-steps li { counter-increment: s; font-size: .78rem; color: var(--ink-2); padding-top: 10px; border-top: 3px solid var(--line) }
.sw-steps li::before { content: counter(s) ". " }
.sw-steps li.done { border-color: var(--sage); color: var(--ink) }
.sw-steps li[aria-current="step"] { border-color: var(--clay); color: var(--ink); font-weight: 600 }
.sw-step { min-width: 0; min-inline-size: 0; border: 0; padding: 18px 0 6px; margin: 0; border-top: 1px solid var(--line); transition: opacity .3s }
.sw-step:disabled { opacity: .45 }
.sw-step legend { font-family: var(--serif); font-size: 1.35rem; padding: 0; margin-bottom: 12px }
.sw-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
@media (max-width: 600px) { .sw-radios { grid-template-columns: 1fr } }
.sw-r input, .sw-day input, .sw-slot input { position: absolute; opacity: 0; width: 1px; height: 1px }
.sw-r span { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; transition: border-color .2s, background .2s }
.sw-r small { color: var(--ink-2) }
.sw-r input:checked + span { border-color: var(--sage); background: var(--sage-2); box-shadow: inset 0 0 0 1px var(--sage) }
.sw-r input:focus-visible + span, .sw-day input:focus-visible + span, .sw-slot input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px }
.sw-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory }
.sw-day { flex: 0 0 auto; scroll-snap-align: start; position: relative }
.sw-r, .sw-slot { position: relative }
.sw-day span { display: grid; place-items: center; width: 72px; height: 84px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); cursor: pointer; line-height: 1.15; transition: border-color .2s, background .2s }
.sw-day b { font-family: var(--serif); font-size: 1.6rem; font-weight: 400 }
.sw-day small { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2) }
.sw-day input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink) }
.sw-day input:checked + span small { color: #d5ddd3 }
.sw-day input:disabled + span { background: transparent; color: #9a9e97; cursor: not-allowed; border-style: dashed }
.sw-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px }
.sw-slots .sw-hint { grid-column: 1 / -1 }
.sw-slot span { display: grid; place-items: center; min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; font-variant-numeric: tabular-nums; font-size: .95rem; line-height: 1.1; text-align: center }
.sw-slot span small { font-size: .66rem; color: var(--ink-2) }
.sw-slot input:checked + span { background: var(--sage); color: var(--white); border-color: var(--sage) }
.sw-slot input:disabled + span { background: transparent; color: #9a9e97; text-decoration: line-through; cursor: not-allowed }
.sw-hint { color: var(--ink-2); font-size: .92rem }
.sw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 600px) { .sw-row { grid-template-columns: 1fr } }
.sw-f { display: grid; gap: 6px }
.sw-f label { font-size: .9rem; font-weight: 500 }
.sw-opt { color: var(--ink-2); font-weight: 400 }
.sw-f input, .sw-f textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 11px 14px }
.sw-f input:focus, .sw-f textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 4px rgba(79, 101, 83, .18) }
.sw [aria-invalid="true"] { border-color: #a3341f !important }
.sw-err { color: #a3341f; font-size: .87rem }
.sw-err::before { content: "⚠ " }
.sw-chk { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-2) }
.sw-chk input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--sage) }
.sw-step .sw-btn { margin-top: 8px }
.sw-done { background: var(--sage-2); border-radius: 14px; padding: 16px 18px; color: var(--ink) }
.sw-done h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin-bottom: 6px }

/* Espacio */
.sw-space-in { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px }
.sw-sp-txt { grid-column: 1; grid-row: 1; align-self: end; display: grid; gap: 16px }
.sw-sp-txt p { color: var(--ink-2) }
.sw-g1 { grid-column: 2 / span 2; grid-row: 1 / span 2 }
.sw-g2 { grid-column: 1; grid-row: 2 }
.sw-g3 { display: none }
.sw-space figure { border-radius: 24px; overflow: hidden }
.sw-space img { width: 100%; height: 100%; object-fit: cover }
@media (max-width: 800px) { .sw-space-in { grid-template-columns: 1fr 1fr } .sw-sp-txt { grid-column: span 2 } .sw-g1 { grid-column: span 2; grid-row: auto } .sw-g2, .sw-g3 { display: block; grid-column: auto; grid-row: auto } }

/* Equipo */
.sw-team { background: var(--paper) }
.sw-tm { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
@media (max-width: 800px) { .sw-tm { grid-template-columns: 1fr } }
.sw-tm li { background: var(--white); border-radius: 20px; padding: 26px; display: grid; gap: 6px }
.sw-av { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-2); color: var(--sage); font-family: var(--serif); font-size: 1.5rem; margin-bottom: 10px }
.sw-tm h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem }
.sw-role { color: var(--clay); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase }
.sw-tm li > p:last-child { color: var(--ink-2) }

/* FAQ y contacto */
.sw-faq-in, .sw-ct-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px) }
@media (max-width: 800px) { .sw-faq-in, .sw-ct-in { grid-template-columns: 1fr } }
.sw-faq details { border-bottom: 1px solid var(--line) }
.sw-faq details:first-child { border-top: 1px solid var(--line) }
.sw-faq summary { cursor: pointer; padding: 20px 0; font-size: 1.12rem; font-weight: 500 }
.sw-faq details p { padding: 0 0 20px; color: var(--ink-2) }
.sw-contact { background: var(--paper) }
.sw-ct-in > div p { color: var(--ink-2); margin-top: 16px }
.sw-ft { background: var(--ink); color: #d5ddd3; padding: 36px 0; font-size: .86rem }
.sw-ft .sw-w { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center }
.sw-ft .sw-logo { color: var(--white) }
.sw-ft .sw-logo span { color: #b9c7b6 }
.sw-book-in > * { min-width: 0 }
