/*
 Theme Name:   Best Western Child
 Theme URI:    https://bestwesternmedellin.com/
 Description:  Child theme de Astra para Best Western Plus Hotel San Diego
 Author:       IDCS Group
 Author URI:   https://idcsgroup.com/
 Template:     astra
 Version:      1.1.0
 Text Domain:  bestwestern-child
*/

/* =========================================================
   Brand Colors — Best Western Plus Hotel San Diego
   ========================================================= */
:root {
    --color-primary:        #8B1936;
    --color-primary-light:  #B61D4A;
    --color-primary-dark:   #7C122E;
    --color-neutral:        #595660;
    --color-blush:          #F5EDEF;
    --color-cream:          #FAF7F5;
    --color-text:           #1A0D12;
}
    :root {
      --c: #8B1936;
      --cl: #B61D4A;
      --cd: #7C122E;
      --coal: #595660;
      --blush: #F5EDEF;
      --blush2: #EDE0E3;
      --cream: #FAF7F5;
      --white: #fff;
      --dark: #180C10;
      --text: #1A0D12;
      --line: rgba(139, 25, 54, .1);
      --grad: linear-gradient(135deg, #B61D4A 0%, #8B1936 50%, #7C122E 100%);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Nunito Sans', sans-serif;
      background: var(--cream);
      color: var(--text);
      overflow-x: hidden
    }

    img {
      display: block;
      max-width: 100%
    }

    a {
      text-decoration: none;
      color: inherit
    }

    /* Scroll reveal — elements visible by default, JS adds animation progressively */
    .rx {
      transition: opacity .75s ease, transform .75s ease
    }

    .rx.will-animate {
      opacity: 0;
      transform: translateY(24px)
    }

    .rx.will-animate.in {
      opacity: 1;
      transform: none
    }

    .rx.d1 {
      transition-delay: .1s
    }

    .rx.d2 {
      transition-delay: .2s
    }

    .rx.d3 {
      transition-delay: .3s
    }

    .rx.d4 {
      transition-delay: .4s
    }

    @keyframes hzoom {
      from {
        transform: scale(1.06)
      }

      to {
        transform: scale(1)
      }
    }

    @keyframes fup {
      from {
        opacity: 0;
        transform: translateY(24px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* ── Eyebrow ── */
    .ew {
      font-size: 10px;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: var(--c);
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px
    }

    .ew::before {
      content: '';
      width: 28px;
      height: 1px;
      background: var(--c);
      flex-shrink: 0
    }

    .ew-lt {
      color: rgba(255, 255, 255, .5)
    }

    .ew-lt::before {
      background: rgba(255, 255, 255, .3)
    }

    /* ── Buttons ── */
    .btn-c {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--grad);
      color: #fff;
      padding: 15px 42px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all .3s;
      box-shadow: 0 5px 22px rgba(139, 25, 54, .32);
      border: none;
      font-family: 'Nunito Sans', sans-serif
    }

    .btn-c:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(139, 25, 54, .44)
    }

    .btn-ol {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: var(--c);
      padding: 14px 38px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      border: 1.5px solid var(--c);
      cursor: pointer;
      transition: all .3s
    }

    .btn-ol:hover {
      background: var(--c);
      color: #fff
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: rgba(255, 255, 255, .7);
      padding: 13px 36px;
      font-size: 11px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      border: 1.5px solid rgba(255, 255, 255, .28);
      cursor: pointer;
      transition: all .3s
    }

    .btn-ghost:hover {
      border-color: #fff;
      color: #fff;
      background: rgba(255, 255, 255, .07)
    }

    .btn-wh {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      color: var(--c);
      padding: 14px 38px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all .3s;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .12)
    }

    .btn-wh:hover {
      background: var(--blush);
      transform: translateY(-2px)
    }

    /* ══ NAV ══ */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 300;
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--line)
    }

    .nw {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .nl img {
      height: 42px
    }

    .nm {
      display: flex;
      align-items: center;
      gap: 34px;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--coal)
    }

    .nm a {
      transition: color .2s;
      position: relative;
      padding-bottom: 3px
    }

    .nm a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--c);
      transform: scaleX(0);
      transition: transform .3s;
      transform-origin: left
    }

    .nm a:hover,
    .nm a.act {
      color: var(--c)
    }

    .nm a:hover::after,
    .nm a.act::after {
      transform: scaleX(1)
    }

    .ncta {
      background: var(--c);
      color: #fff;
      padding: 10px 24px;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 500;
      cursor: pointer;
      transition: background .25s;
      box-shadow: 0 2px 12px rgba(139, 25, 54, .28)
    }

    .ncta:hover {
      background: var(--cl)
    }

    /* ══ HERO ══ */
    .hero {
      height: calc(100vh - 126px);
      min-height: 620px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, #180C10, #3a1520)
    }

    .hero-bg img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 38%;
      animation: hzoom 14s ease-out forwards
    }

    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(24, 12, 16, .02) 0%, rgba(24, 12, 16, .72) 65%, rgba(24, 12, 16, .96) 100%),
        linear-gradient(90deg, rgba(24, 12, 16, .88) 0%, rgba(24, 12, 16, .5) 55%, transparent 82%)
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px 96px;
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 60px;
      align-items: flex-end
    }

    .h-ey {
      font-size: 10px;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
      animation: fup .9s .1s ease both
    }

    .h-ey::before {
      content: '';
      width: 28px;
      height: 1px;
      background: rgba(255, 255, 255, .28)
    }

    .h-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(52px, 6.2vw, 90px);
      font-weight: 400;
      color: #fff;
      line-height: .93;
      letter-spacing: -3px;
      margin-bottom: 26px;
      animation: fup .9s .2s ease both
    }

    .h-title em {
      font-style: italic;
      color: rgba(255, 255, 255, .44);
      display: block
    }

    .h-desc {
      font-size: 15px;
      font-weight: 300;
      color: rgba(255, 255, 255, .5);
      line-height: 1.82;
      max-width: 520px;
      margin-bottom: 36px;
      animation: fup .9s .32s ease both
    }

    .h-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      animation: fup .9s .42s ease both
    }

    .hero-stats {
      animation: fup .9s .52s ease both
    }

    .hst {
      padding: 22px 24px;
      border-top: 1px solid rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .07);
      backdrop-filter: blur(14px)
    }

    .hst:first-child {
      border-top: none;
      border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    .hst-n {
      font-family: 'Playfair Display', serif;
      font-size: 44px;
      font-weight: 400;
      color: #fff;
      line-height: 1;
      display: block;
      margin-bottom: 4px
    }

    .hst-l {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45)
    }

    /* ══ STRIP ══ */
    .strip {
      background: var(--blush);
      border-bottom: 1px solid var(--line)
    }

    .strip-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px;
      display: flex;
      align-items: center
    }

    .si {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 22px;
      border-right: 1px solid var(--line)
    }

    .si:first-child {
      padding-left: 0
    }

    .si:last-child {
      border-right: none;
      padding-right: 0
    }

    .si-ic {
      font-size: 22px;
      flex-shrink: 0
    }

    .si strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px
    }

    .si span {
      font-size: 11px;
      color: var(--coal)
    }

    /* ══ INTRO ══ */
    .intro {
      padding: 108px 0;
      background: var(--white)
    }

    .intro-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px;
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: 100px;
      align-items: center
    }

    .intro-line {
      width: 44px;
      height: 2px;
      background: var(--c);
      margin-bottom: 26px
    }

    .intro-tagline {
      font-family: 'Playfair Display', serif;
      font-size: clamp(22px, 2.5vw, 32px);
      font-weight: 400;
      font-style: italic;
      color: var(--c);
      margin-bottom: 22px;
      line-height: 1.3
    }

    .intro-body {
      font-size: 15px;
      font-weight: 300;
      color: var(--coal);
      line-height: 1.88;
      margin-bottom: 16px
    }

    .intro-body strong {
      color: var(--text);
      font-weight: 500
    }

    .intro-feats {
      display: flex;
      flex-direction: column;
      gap: 11px;
      margin: 26px 0 38px
    }

    .if {
      display: flex;
      align-items: center;
      gap: 13px;
      font-size: 13px;
      color: var(--coal);
      font-weight: 300
    }

    .if::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--c);
      flex-shrink: 0
    }

    .intro-imgs {
      position: relative;
      height: 520px
    }

    .ip-main {
      position: absolute;
      top: 0;
      left: 0;
      right: 80px;
      bottom: 80px;
      overflow: hidden;
      box-shadow: 0 20px 56px rgba(139, 25, 54, .16)
    }

    .ip-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s
    }

    .ip-main:hover img {
      transform: scale(1.04)
    }

    .ip-sm {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 240px;
      height: 260px;
      overflow: hidden;
      border: 5px solid var(--white);
      box-shadow: 0 12px 36px rgba(139, 25, 54, .14)
    }

    .ip-sm img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s
    }

    .ip-sm:hover img {
      transform: scale(1.06)
    }

    .ip-badge {
      position: absolute;
      bottom: 96px;
      left: -20px;
      background: var(--c);
      color: #fff;
      padding: 14px 18px;
      box-shadow: 0 8px 24px rgba(139, 25, 54, .35)
    }

    .ip-badge-n {
      font-family: 'Playfair Display', serif;
      font-size: 36px;
      font-weight: 400;
      line-height: 1;
      display: block
    }

    .ip-badge-l {
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      opacity: .8
    }

    /* ══ H2: HABITACIONES ══ */
    .rooms {
      padding: 108px 0;
      background: var(--cream)
    }

    .rooms-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px
    }

    .sec-hdr {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 20px
    }

    .sec-h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(32px, 3.4vw, 50px);
      font-weight: 400;
      letter-spacing: -1.5px;
      line-height: 1.05;
      margin-bottom: 0
    }

    .sec-h2 em {
      font-style: italic;
      color: var(--c)
    }

    .btn-gv {
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--c);
      border-bottom: 1px solid var(--c);
      padding-bottom: 3px;
      transition: opacity .2s;
      font-weight: 500
    }

    .btn-gv:hover {
      opacity: .65
    }

    /* H3 chips */
    .h3-strip {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      border: 1px solid var(--line);
      margin: 24px 0 40px
    }

    .h3c {
      padding: 16px 20px;
      background: var(--white);
      border-right: 1px solid var(--line)
    }

    .h3c:last-child {
      border-right: none
    }

    .h3c h3 {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      font-family: 'Nunito Sans', sans-serif;
      margin-bottom: 3px
    }

    .h3c p {
      font-size: 11px;
      font-weight: 300;
      color: var(--coal)
    }

    /* room cards */
    .rooms-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    .rc {
      background: var(--white);
      border: 1px solid var(--line);
      overflow: hidden;
      transition: all .34s;
      cursor: default
    }

    .rc:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 48px rgba(139, 25, 54, .12)
    }

    .rc-img {
      height: 246px;
      overflow: hidden;
      position: relative;
      background: linear-gradient(150deg, #c8a882, #7a5e45)
    }

    .rc-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .65s
    }

    .rc:hover .rc-img img {
      transform: scale(1.07)
    }

    .rc-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(24, 12, 16, .68) 0%, transparent 55%)
    }

    .rc-tag {
      position: absolute;
      top: 16px;
      left: 16px;
      background: var(--c);
      color: #fff;
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 5px 12px;
      font-weight: 500
    }

    .rc-body {
      padding: 26px
    }

    .rc-type {
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--c);
      margin-bottom: 5px;
      font-weight: 500
    }

    .rc-name {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      font-weight: 400;
      color: var(--text);
      margin-bottom: 8px
    }

    .rc-desc {
      font-size: 13px;
      font-weight: 300;
      color: var(--coal);
      line-height: 1.66;
      margin-bottom: 16px
    }

    .rc-feats {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 20px
    }

    .rf {
      background: var(--blush);
      padding: 5px 11px;
      font-size: 10px;
      font-weight: 500;
      color: var(--coal);
      letter-spacing: .3px
    }

    .rc-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 16px;
      border-top: 1px solid var(--line)
    }

    .rc-price {
      font-family: 'Playfair Display', serif;
      font-size: 26px;
      font-weight: 400;
      color: var(--c)
    }

    .rc-price span {
      font-size: 11px;
      color: var(--coal);
      font-weight: 300
    }

    .rc-cta {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--c);
      font-weight: 500;
      transition: color .2s
    }

    .rc-cta:hover {
      color: var(--cl)
    }

    /* ══ H2: EVENTOS ══ */
    .ev-photo {
      position: relative;
      height: 800px;
      overflow: hidden;
      background: linear-gradient(160deg, #0a0308, #180810)
    }

    .ev-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      opacity: .52;
      transition: transform .7s
    }

    .ev-photo:hover img {
      transform: scale(1.02)
    }

    .ev-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(10, 3, 8, .92) 0%, rgba(10, 3, 8, .6) 52%, rgba(10, 3, 8, .18) 82%)
    }

    .ev-inner {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      padding: 0 56px;
      max-width: 1440px;
      left: 0;
      right: 0;
      margin: 0 auto
    }

    .ev-content {
      max-width: 620px
    }

    .ev-h {
      font-family: 'Playfair Display', serif;
      font-size: clamp(38px, 4.5vw, 68px);
      font-weight: 400;
      color: #fff;
      line-height: .95;
      letter-spacing: -2.5px;
      margin-bottom: 12px
    }

    .ev-h em {
      font-style: italic;
      color: rgba(255, 255, 255, .44);
      display: block
    }

    .ev-h3 {
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 5px;
      letter-spacing: .3px;
      font-weight: 300
    }

    .ev-desc {
      font-size: 15px;
      font-weight: 300;
      color: rgba(255, 255, 255, .46);
      line-height: 1.82;
      max-width: 480px;
      margin: 16px 0 32px
    }

    .ev-rows {
      display: flex;
      flex-direction: column;
      margin-bottom: 36px
    }

    .ev-row {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 14px 0;
      border-top: 1px solid rgba(255, 255, 255, .1)
    }

    .ev-ico {
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 1px
    }

    .ev-row strong {
      display: block;
      font-size: 13px;
      color: #fff;
      font-weight: 500;
      margin-bottom: 2px
    }

    .ev-row span {
      font-size: 12px;
      color: rgba(255, 255, 255, .42)
    }

    .ev-stat {
      position: absolute;
      right: 56px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      text-align: center
    }

    .ev-stat-n {
      font-family: 'Playfair Display', serif;
      font-size: 130px;
      font-weight: 400;
      color: rgba(255, 255, 255, .05);
      line-height: 1;
      display: block
    }

    .ev-stat-l {
      font-size: 10px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .28);
      display: block;
      margin-top: -30px
    }

    /* ══ H2: SERVICIOS ══ */
    .servicios {
      padding: 108px 0;
      background: var(--white)
    }

    .rest-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 96px;
      align-items: center
    }

    .rest-imgs {
      position: relative;
      height: 520px
    }

    .ri-main {
      position: absolute;
      top: 0;
      left: 0;
      right: 60px;
      bottom: 60px;
      overflow: hidden;
      box-shadow: 0 20px 56px rgba(139, 25, 54, .16)
    }

    .ri-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s
    }

    .ri-main:hover img {
      transform: scale(1.04)
    }

    .ri-sm {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 220px;
      height: 240px;
      overflow: hidden;
      border: 5px solid var(--white);
      box-shadow: 0 12px 32px rgba(139, 25, 54, .14)
    }

    .ri-sm img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s
    }

    .ri-sm:hover img {
      transform: scale(1.06)
    }

    .ri-badge {
      position: absolute;
      bottom: 76px;
      left: -20px;
      background: var(--grad);
      color: #fff;
      padding: 16px 20px;
      box-shadow: 0 8px 24px rgba(139, 25, 54, .38)
    }

    .ri-badge-n {
      font-family: 'Playfair Display', serif;
      font-size: 38px;
      font-weight: 400;
      line-height: 1;
      display: block
    }

    .ri-badge-l {
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      opacity: .8
    }

    .rest-h3 {
      font-size: 14px;
      font-weight: 500;
      color: var(--c);
      margin-bottom: 4px
    }

    .rest-h3b {
      font-size: 14px;
      font-weight: 300;
      color: var(--coal);
      font-style: italic;
      margin-bottom: 18px
    }

    .rest-body {
      font-size: 15px;
      font-weight: 300;
      color: var(--coal);
      line-height: 1.86;
      margin-bottom: 26px
    }

    .rest-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 32px
    }

    .rchip {
      background: var(--blush);
      border: 1px solid var(--line);
      padding: 8px 16px;
      font-size: 12px;
      color: var(--coal);
      transition: all .25s;
      cursor: default
    }

    .rchip:hover {
      border-color: var(--c);
      color: var(--c)
    }

    /* ══ H2: UBICACIÓN ══ */
    .ubicacion {
      padding: 108px 0;
      background: var(--cream)
    }

    .loc-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 90px;
      align-items: center
    }

    .loc-photo {
      position: relative;
      height: 500px;
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(139, 25, 54, .14);
      background: linear-gradient(150deg, #2a4020, #5a8040)
    }

    .loc-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s
    }

    .loc-photo:hover img {
      transform: scale(1.04)
    }

    .loc-badge {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(8px);
      border: 1px solid var(--line);
      padding: 12px 16px
    }

    .loc-badge-n {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text)
    }

    .loc-badge-a {
      display: block;
      font-size: 10px;
      color: var(--coal);
      margin-top: 2px
    }

    .loc-h3 {
      font-size: 14px;
      font-weight: 500;
      color: var(--c);
      margin-bottom: 4px
    }

    .loc-h3b {
      font-size: 14px;
      font-weight: 300;
      color: var(--coal);
      font-style: italic;
      margin-bottom: 18px
    }

    .loc-body {
      font-size: 15px;
      font-weight: 300;
      color: var(--coal);
      line-height: 1.86;
      margin-bottom: 26px
    }

    .loc-pts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 32px
    }

    .lpt {
      background: var(--white);
      border: 1px solid var(--line);
      padding: 16px 18px;
      transition: border-color .25s;
      cursor: default
    }

    .lpt:hover {
      border-color: var(--c)
    }

    .lpt-ic {
      font-size: 20px;
      margin-bottom: 7px
    }

    .lpt strong {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 2px
    }

    .lpt span {
      font-size: 11px;
      color: var(--coal)
    }

    /* ══ REVIEWS ══ */
    .reviews {
      padding: 108px 0;
      background: var(--white)
    }

    .rev-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px
    }

    .rev-hdr {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 52px
    }

    .rnum {
      font-family: 'Playfair Display', serif;
      font-size: 56px;
      font-weight: 400;
      color: var(--c);
      line-height: 1
    }

    .rev-rating {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 14px
    }

    .stars {
      color: var(--c);
      font-size: 16px;
      letter-spacing: 3px;
      margin-bottom: 4px
    }

    .rinfo {
      font-size: 12px;
      color: var(--coal);
      font-weight: 300
    }

    .rev-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    .rev-card {
      background: var(--cream);
      border: 1px solid var(--line);
      padding: 32px;
      position: relative;
      overflow: hidden;
      transition: all .3s;
      cursor: default
    }

    .rev-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(139, 25, 54, .1)
    }

    .rev-q {
      position: absolute;
      top: -14px;
      right: 16px;
      font-family: 'Playfair Display', serif;
      font-size: 88px;
      font-weight: 400;
      color: rgba(139, 25, 54, .06);
      line-height: 1;
      pointer-events: none
    }

    .rev-stars {
      color: var(--c);
      font-size: 13px;
      letter-spacing: 2px;
      margin-bottom: 14px
    }

    .rev-text {
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      font-weight: 400;
      font-style: italic;
      color: var(--text);
      line-height: 1.62;
      margin-bottom: 22px
    }

    .rev-auth {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .rev-av {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--c);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #fff;
      font-weight: 600;
      flex-shrink: 0
    }

    .rev-name {
      font-size: 12px;
      font-weight: 500;
      color: var(--text)
    }

    .rev-when {
      font-size: 11px;
      color: var(--coal)
    }

    /* ══ BOOKING BANNER ══ */
    .booking {
      background: var(--dark);
      padding: 60px 0
    }

    .bk-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 48px
    }

    .bk-h {
      font-family: 'Playfair Display', serif;
      font-size: clamp(26px, 2.5vw, 38px);
      font-weight: 400;
      color: #fff;
      letter-spacing: -1px;
      margin-bottom: 8px
    }

    .bk-h em {
      font-style: italic;
      color: rgba(255, 255, 255, .42)
    }

    .bk-sub-txt {
      font-size: 13px;
      font-weight: 300;
      color: rgba(255, 255, 255, .36)
    }

    .bk-form {
      display: flex;
      gap: 3px;
      flex: 1;
      max-width: 800px
    }

    .bk-field {
      flex: 1;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      padding: 0 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 60px
    }

    .bk-label {
      font-size: 8px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .36);
      margin-bottom: 4px
    }

    .bk-val {
      font-size: 14px;
      font-weight: 300;
      color: rgba(255, 255, 255, .68)
    }

    .bk-btn {
      background: var(--grad);
      color: #fff;
      padding: 0 32px;
      min-height: 60px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: opacity .25s;
      white-space: nowrap;
      font-family: 'Nunito Sans', sans-serif
    }

    .bk-btn:hover {
      opacity: .88
    }

    /* Booking — inputs & selects dentro de .bk-field */
    .bk-input {
      background: transparent;
      border: none;
      outline: none;
      color: rgba(255, 255, 255, .75);
      font-size: 14px;
      font-weight: 300;
      font-family: 'Nunito Sans', sans-serif;
      width: 100%;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      padding: 0;
      line-height: 1.3
    }

    /* Flecha del calendario en webkit */
    .bk-input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
      opacity: .45;
      cursor: pointer
    }

    /* Flechita del select */
    .bk-field:has(select) {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,.35)'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center
    }

    .bk-input option {
      background: #1a0d12;
      color: #fff
    }

    /* Borde rojo de validación */
    .bk-field.bk-error {
      border-color: var(--c) !important
    }

    /* ══ PROMO CTA ══ */
    .promo {
      position: relative;
      padding: 108px 0;
      overflow: hidden
    }

    .promo-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, #0a0308, #180810)
    }

    .promo-bg img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .36
    }

    .promo-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(10, 3, 8, .96) 0%, rgba(10, 3, 8, .8) 50%, rgba(10, 3, 8, .42) 100%)
    }

    .promo-inner {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center
    }

    .promo-h {
      font-family: 'Playfair Display', serif;
      font-size: clamp(40px, 4.8vw, 72px);
      font-weight: 400;
      color: #fff;
      line-height: .95;
      letter-spacing: -2.5px;
      margin-bottom: 14px
    }

    .promo-h em {
      font-style: italic;
      color: rgba(255, 255, 255, .4);
      display: block
    }

    .promo-sub {
      font-size: 15px;
      font-weight: 300;
      color: rgba(255, 255, 255, .42);
      line-height: 1.82;
      margin-bottom: 32px
    }

    .promo-offers {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .po {
      background: rgba(255, 255, 255, .07);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, .1);
      padding: 22px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background .3s
    }

    .po:hover {
      background: rgba(255, 255, 255, .12)
    }

    .po-name {
      display: block;
      font-size: 13px;
      color: #fff;
      font-weight: 400;
      margin-bottom: 3px
    }

    .po-desc {
      font-size: 11px;
      color: rgba(255, 255, 255, .34)
    }

    .po-val {
      font-family: 'Playfair Display', serif;
      font-size: 32px;
      font-weight: 400;
      color: var(--cl)
    }

    /* ══ FOOTER ══ */
    .footer {
      background: var(--dark)
    }

    .fm {
      max-width: 1440px;
      margin: 0 auto;
      padding: 72px 56px 52px;
      display: grid;
      grid-template-columns: 2.2fr 1fr 1fr 1fr;
      gap: 64px
    }

    .fbl img {
      height: 44px;
      margin-bottom: 18px;
      mix-blend-mode: screen;
      filter: brightness(1.4) saturate(.75)
    }

    .fbt {
      font-size: 13px;
      font-weight: 300;
      line-height: 1.88;
      color: rgba(255, 255, 255, .34);
      max-width: 240px;
      margin-bottom: 24px
    }

    .fbs {
      display: flex;
      gap: 7px
    }

    .fsb {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: rgba(255, 255, 255, .9);
      cursor: pointer;
      transition: all .22s
    }

    .fsb:hover {
      background: var(--c);
      border-color: var(--c);
      color: #fff
    }

    .fc h4 {
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .88);
      margin-bottom: 22px;
      font-weight: 500
    }

    .fc ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .fc li {
      font-size: 13px;
      font-weight: 300;
      color: rgba(255, 255, 255, .34);
      cursor: pointer;
      transition: color .2s
    }

    .fc li:hover,
    .fc li.act {
      color: var(--cl)
    }

    .fct {
      display: flex;
      gap: 10px;
      font-size: 12px;
      font-weight: 300;
      color: rgba(255, 255, 255, .34);
      margin-bottom: 10px;
      align-items: flex-start
    }

    .fci {
      color: var(--cl);
      flex-shrink: 0;
      margin-top: 1px;
      font-size: 13px
    }

    .fcs {
      color: var(--cl)
    }

    .fbot {
      border-top: 1px solid rgba(255, 255, 255, .06);
      padding: 20px 56px;
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .fbot-l {
      font-size: 11px;
      color: rgba(255, 255, 255, .2)
    }

    .fbot-r {
      display: flex;
      gap: 22px
    }

    .fbot-r a {
      font-size: 11px;
      color: rgba(255, 255, 255, .2);
      transition: color .2s
    }

    .fbot-r a:hover {
      color: rgba(255, 255, 255, .6)
    }

    .flegal {
      text-align: center;
      padding: 10px 56px 16px;
      font-size: 10px;
      color: rgba(255, 255, 255, .2);
      letter-spacing: .3px
    }

    .fdev {
      text-align: center;
      padding: 6px 56px 14px;
      font-size: 10px;
      color: rgba(255, 255, 255, .18);
      letter-spacing: .3px
    }
    .fdev a {
      color: rgba(255, 255, 255, .38);
      text-decoration: none;
      transition: color .2s
    }
    .fdev a:hover { color: rgba(255, 255, 255, .7) }

    .fab {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 500;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #25D366;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 8px 28px rgba(37, 211, 102, .45);
      cursor: pointer;
      animation: fabf 3s ease-in-out infinite;
      transition: transform .2s
    }

    .fab:hover {
      animation: none;
      transform: scale(1.12)
    }

    @keyframes fabf {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-6px)
      }
    }

    /* ── LIGHTBOX ── */
    .lb {
      position: fixed;
      inset: 0;
      z-index: 900;
      background: rgba(10,3,8,.92);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s
    }
    .lb.lb-open {
      opacity: 1;
      pointer-events: all
    }
    .lb-img {
      max-width: 90vw;
      max-height: 88vh;
      object-fit: contain;
      box-shadow: 0 24px 80px rgba(0,0,0,.7);
      transform: scale(.94);
      transition: transform .3s
    }
    .lb.lb-open .lb-img { transform: scale(1) }
    .lb-close {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.5);
      color: #fff;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s
    }
    .lb-close:hover { background: rgba(139,25,54,.8) }
    .lb-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      padding: 0;
      border-radius: 50%;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.5);
      color: #fff;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s;
      user-select: none
    }
    .lb-arrow:hover { background: rgba(139,25,54,.8) }
    .lb-prev { left: 20px }
    .lb-next { right: 20px }
    .lb-counter {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      color: rgba(255,255,255,.45);
      letter-spacing: 2px
    }

    /* ══════════════════════════════════════════
       NAV — HAMBURGER BUTTON
    ══════════════════════════════════════════ */
    .n-ham {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      flex-shrink: 0
    }

    .n-ham span {
      display: block;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: transform .3s, opacity .3s
    }

    #nav.nav-open .n-ham span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
    }

    #nav.nav-open .n-ham span:nth-child(2) {
      opacity: 0
    }

    #nav.nav-open .n-ham span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
    }

    /* ══════════════════════════════════════════
       BREAKPOINT — TABLET (≤ 1100px)
    ══════════════════════════════════════════ */
    @media (max-width: 1100px) {
      .nw { padding: 0 32px }
      .nm { gap: 22px }

      .hero-inner {
        padding: 0 32px 80px;
        grid-template-columns: 1fr
      }

      .hero-stats { display: none }

      .intro,
      .rooms,
      .servicios,
      .ubicacion,
      .reviews,
      .promo { padding: 80px 0 }

      .strip-wrap,
      .rooms-wrap,
      .rev-wrap,
      .bk-wrap,
      .promo-inner { padding: 0 32px }

      .intro-wrap { padding: 0 32px; gap: 60px }
      .ev-inner { padding: 0 32px }
      .ev-stat { display: none }
      .rest-wrap { padding: 0 32px; gap: 56px }
      .loc-wrap { padding: 0 32px; gap: 56px }

      .fm { padding: 60px 32px 40px; gap: 40px }
      .fbot { padding: 20px 32px }
      .flegal { padding: 10px 32px 16px }
    }

    /* ══════════════════════════════════════════
       BREAKPOINT — MOBILE (≤ 768px)
    ══════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── Nav ── */
      .nw { padding: 0 20px; height: 66px }

      .nm {
        display: none;
        position: fixed;
        top: 66px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 8px 0 16px;
        border-bottom: 1px solid var(--line);
        z-index: 299
      }

      #nav.nav-open .nm { display: flex }

      .nm a {
        width: 100%;
        padding: 13px 20px;
        font-size: 11px
      }

      .nm a::after { display: none }
      .ncta { display: none }
      .n-ham { display: flex }

      /* ── Hero ── */
      .hero { min-height: 600px }

      .hero-inner {
        padding: 0 20px 60px;
        gap: 0
      }

      .h-title { letter-spacing: -1px }

      .h-btns { flex-direction: column; gap: 10px }

      .h-btns .btn-c,
      .h-btns .btn-ghost {
        width: 100%;
        justify-content: center;
        padding: 14px 20px
      }

      /* ── Strip ── */
      .strip-wrap {
        padding: 0 20px;
        flex-wrap: wrap
      }

      .si {
        flex: 0 0 50%;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 16px
      }

      .si:first-child { padding-left: 16px }
      .si:last-child { padding-right: 16px; border-right: none }
      .si:nth-child(odd) { border-right: 1px solid var(--line) }
      .si:nth-last-child(-n+2) { border-bottom: none }

      /* ── Intro ── */
      .intro { padding: 60px 0 }

      .intro-wrap {
        grid-template-columns: 1fr;
        gap: 44px;
        padding: 0 20px
      }

      .intro-imgs { height: 300px }
      .ip-sm { width: 160px; height: 175px }

      /* ── Rooms ── */
      .rooms { padding: 60px 0 }
      .rooms-wrap { padding: 0 20px }

      .sec-hdr {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
      }

      .rooms-grid { grid-template-columns: 1fr }

      .h3-strip { grid-template-columns: 1fr }

      .h3c {
        border-right: none;
        border-bottom: 1px solid var(--line)
      }

      .h3c:last-child { border-bottom: none }

      /* ── Eventos ── */
      .ev-photo {
        height: auto;
        min-height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end
      }

      .ev-inner {
        position: relative;
        inset: unset;
        left: unset;
        right: unset;
        margin: 0;
        width: 100%;
        padding: 80px 20px 72px
      }

      .ev-h { letter-spacing: -1px }

      /* ── Servicios ── */
      .servicios { padding: 60px 0 }

      .rest-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px
      }

      .rest-imgs { height: 280px }
      .ri-sm { width: 150px; height: 165px }

      /* ── Ubicación ── */
      .ubicacion { padding: 60px 0 }

      .loc-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px
      }

      .loc-photo { height: 280px }

      /* ── Reviews ── */
      .reviews { padding: 60px 0 }
      .rev-wrap { padding: 0 20px }

      .rev-hdr {
        flex-direction: column;
        gap: 0;
        margin-bottom: 32px
      }

      .rev-grid { grid-template-columns: 1fr }

      /* ── Booking ── */
      .booking { padding: 52px 0 }

      .bk-wrap {
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px;
        gap: 24px
      }

      .bk-form {
        flex-direction: column;
        max-width: 100%
      }

      .bk-field { min-height: 56px }
      .bk-btn { min-height: 52px }

      /* ── Promo ── */
      .promo { padding: 60px 0 }

      .promo-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px
      }

      /* ── Footer ── */
      .fm {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
        padding: 52px 20px 36px
      }

      .fm > div:first-child { grid-column: 1 / -1 }

      .fbot {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 16px 20px
      }

      .fbot-r { justify-content: center }
      .flegal { padding: 8px 20px 14px }
    }

    /* ══════════════════════════════════════════
       BREAKPOINT — MOBILE SMALL (≤ 480px)
    ══════════════════════════════════════════ */
    @media (max-width: 480px) {

      /* Booking form: 2 columnas */
      .bk-form {
        display: grid;
        grid-template-columns: 1fr 1fr
      }

      .bk-btn { grid-column: 1 / -1 }

      /* Footer una columna */
      .fm {
        grid-template-columns: 1fr;
        gap: 28px
      }

      .fm > div:first-child { grid-column: auto }

      /* Ubicación puntos una columna */
      .loc-pts { grid-template-columns: 1fr }
    }
/* ══════════════════════════════════════════════
   bw-habitaciones.css — page-specific styles only
   Base styles live in bw-base.css
══════════════════════════════════════════════ */

/* ── Extra token ── */
:root {
  --line2: rgba(139, 25, 54, .18);
}

/* ── Photo wrap with gradient fallback ── */
.pw {
  position: relative;
  overflow: hidden;
}

.pw img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

.pw:hover img {
  transform: scale(1.04);
}

/* ── Breadcrumb ── */
.bc {
  margin-top: 76px;
  padding: 16px 56px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--coal);
  letter-spacing: .3px;
}

.bc-sep {
  color: var(--line2);
  font-size: 10px;
}

.bc-cur {
  color: var(--c);
  font-weight: 500;
}

/* ══════════════════════════
   PAGE HERO — editorial split
══════════════════════════ */
.page-hero {
  background: var(--cream);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.page-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
  align-items: stretch;
}

.ph-text {
  padding: 72px 80px 72px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ph-kicker {
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--c);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  animation: fup .8s .1s ease both;
}

.ph-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--c);
}

.ph-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 3.8vw, 58px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--text);
  margin-bottom: 22px;
  animation: fup .8s .2s ease both;
}

.ph-h1 em {
  font-style: italic;
  color: var(--c);
}

.ph-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.82;
  max-width: 420px;
  margin-bottom: 36px;
  animation: fup .8s .3s ease both;
}

.ph-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  animation: fup .8s .4s ease both;
}

.ph-stat {
  flex: 1;
  padding-right: 24px;
  border-right: 1px solid var(--line);
}

.ph-stat:last-child {
  border-right: none;
  padding-right: 0;
  padding-left: 24px;
}

.ph-stat:first-child {
  padding-left: 0;
}

.ph-stat-n {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 400;
  color: var(--c);
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}

.ph-stat-l {
  font-size: 11px;
  color: var(--coal);
  font-weight: 400;
}

/* right: stacked photos */
.ph-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}

.ph-photo {
  overflow: hidden;
  position: relative;
}

.ph-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s;
}

.ph-photo:hover img {
  transform: scale(1.05);
}

.ph-photo:first-child {
  grid-row: 1/3;
}

.ph-photo:nth-child(2) {
  background: linear-gradient(140deg, #d5e0e8, #405878);
}

.ph-photo:nth-child(3) {
  background: linear-gradient(155deg, #3a1520, #8B1936);
}

/* ══════════════════════════
   ROOM TYPE SELECTOR — sticky tab bar
══════════════════════════ */
.type-nav {
  position: sticky;
  top: 76px;
  z-index: 200;
  background: var(--white);
  border-bottom: 2px solid var(--line);
  box-shadow: 0 2px 20px rgba(139, 25, 54, .06);
}

.type-nav-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  align-items: stretch;
}

.tn-tab {
  padding: 0 36px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--coal);
  cursor: pointer;
  transition: all .3s;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.tn-tab:hover {
  color: var(--c);
}

.tn-tab.active {
  color: var(--c);
  border-bottom-color: var(--c);
  background: var(--blush);
}

.tn-badge {
  background: var(--blush);
  color: var(--c);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 1px;
  font-weight: 600;
}

.tn-tab.active .tn-badge {
  background: var(--c);
  color: #fff;
}

.tn-sep {
  width: 1px;
  background: var(--line);
  margin: 14px 0;
  flex-shrink: 0;
}

.tn-price-preview {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--coal);
}

.tnp-label {
  font-weight: 300;
}

.tnp-from {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--c);
}

/* ══════════════════════════
   ROOM SECTIONS
══════════════════════════ */
.room-section {
  scroll-margin-top: 136px;
}

/* ── Room Header Banner ── */
.room-banner {
  position: relative;
  height: 540px;
  overflow: hidden;
}

.rb-photo {
  position: absolute;
  inset: 0;
}

.rb-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rb-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(18, 5, 10, .82) 0%, rgba(18, 5, 10, .54) 45%, rgba(18, 5, 10, .18) 100%);
}

.rb-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  max-width: 1440px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 56px 52px;
}

.rb-type {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 10px;
}

.rb-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400;
  color: #fff;
  line-height: .95;
  letter-spacing: -2px;
  margin-bottom: 16px;
}

.rb-name em {
  font-style: italic;
  color: rgba(255, 255, 255, .55);
}

.rb-tagline {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, .52);
  max-width: 480px;
  line-height: 1.72;
  margin-bottom: 28px;
}

.rb-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rb-pill {
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 16px;
  font-weight: 400;
}

.rb-h3 {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, .48);
  letter-spacing: .3px;
  margin-top: 8px;
  margin-bottom: 16px;
  font-style: italic;
  max-width: 520px;
}

/* room number watermark */
.rb-num {
  position: absolute;
  right: 56px;
  bottom: -20px;
  z-index: 3;
  font-family: 'Playfair Display', serif;
  font-size: 200px;
  font-weight: 400;
  color: rgba(255, 255, 255, .04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ── Room Detail Layout ── */
.room-detail {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.rd-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 56px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 80px;
  align-items: start;
}

.rd-section-label {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 14px;
  display: block;
}

.rd-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 18px;
}

.rd-h2 em {
  font-style: italic;
  color: var(--c);
}

.rd-body {
  font-size: 15px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.86;
  margin-bottom: 28px;
}

.rd-body strong {
  color: var(--text);
  font-weight: 500;
}

/* image gallery row */
.rd-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin: 36px 0;
}

.rdg-main {
  height: 280px;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
}

.rdg-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s;
}

.rdg-main:hover img {
  transform: scale(1.05);
}

.rdg-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rdg-sm {
  flex: 1;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  min-height: 130px;
}

.rdg-sm img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s;
}

.rdg-sm:hover img {
  transform: scale(1.06);
}

/* amenities grid */
.amenities-title {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 20px;
  display: block;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-bottom: 36px;
  border: 1px solid var(--line);
}

.am-item {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .22s;
  cursor: default;
}

.am-item:hover {
  background: var(--blush);
}

.am-item:nth-child(3n) {
  border-right: none;
}

.am-ico {
  font-size: 18px;
  flex-shrink: 0;
}

.am-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
}

.am-sub {
  font-size: 10px;
  color: var(--coal);
}

/* right: sticky booking card */
.rd-card {
  position: sticky;
  top: 136px;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 12px 48px rgba(139, 25, 54, .1);
}

.rdc-head {
  background: linear-gradient(135deg, var(--cl) 0%, var(--c) 50%, var(--cd) 100%);
  padding: 28px 30px;
}

.rdc-room {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 6px;
}

.rdc-name {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  margin-bottom: 12px;
}

.rdc-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.rdc-from {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  font-weight: 300;
}

.rdc-price {
  font-family: 'Playfair Display', serif;
  font-size: 44px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
}

.rdc-currency {
  font-size: 15px;
  color: rgba(255, 255, 255, .6);
}

.rdc-night {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  font-weight: 300;
  margin-top: 2px;
}

.rdc-body {
  padding: 24px 30px;
}

.rdc-field {
  margin-bottom: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .22s;
}

.rdc-field:hover {
  border-color: var(--c);
}

.rdc-field-l {
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--coal);
  display: block;
  margin-bottom: 6px;
}

.rdc-field-v {
  font-size: 14px;
  font-weight: 300;
  color: var(--text);
}

.rdc-field-v em {
  color: var(--coal);
  font-style: normal;
  font-size: 13px;
}

.rdc-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 300;
  font-family: 'Nunito Sans', sans-serif;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}

.rdc-input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .4;
  cursor: pointer;
}

.rdc-field:has(select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(89,86,96,.45)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.rdc-field.rdc-error {
  border-color: var(--c);
  background-color: var(--blush);
}

.rdc-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--cl), var(--c), var(--cd));
  color: #fff;
  padding: 17px 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-family: 'Nunito Sans', sans-serif;
  cursor: pointer;
  border: none;
  transition: opacity .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.rdc-submit:hover {
  opacity: .88;
}

.rdc-submit-arr {
  transition: transform .22s;
}

.rdc-submit:hover .rdc-submit-arr {
  transform: translateX(5px);
}

.rdc-contact {
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  color: var(--coal);
  margin-top: 4px;
}

.rdc-contact a {
  color: var(--c);
  font-weight: 500;
}

.rdc-perks {
  border-top: 1px solid var(--line);
  padding: 20px 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rdc-perk {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 300;
  color: var(--coal);
}

.rdc-perk::before {
  content: '✓';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--c);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rdc-disc {
  background: var(--blush);
  padding: 12px 30px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.rdc-disc span {
  font-size: 11px;
  color: var(--coal);
  font-weight: 300;
}

.rdc-disc strong {
  color: var(--c);
  font-weight: 600;
}

/* ══════════════════════════
   SERVICES H2 SECTION
══════════════════════════ */
.services {
  padding: 100px 0;
  background: var(--cream);
}

.services-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}

.services-hdr {
  text-align: center;
  margin-bottom: 64px;
}

.services-kicker {
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--c);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.services-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--c);
}

.services-kicker::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--c);
}

.services-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 3.6vw, 54px);
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin-bottom: 18px;
}

.services-h2 em {
  font-style: italic;
  color: var(--c);
}

.services-h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--c);
  margin-bottom: 4px;
  text-align: center;
  margin-top: 12px;
}

.services-h3-alt {
  font-size: 15px;
  font-weight: 300;
  color: var(--coal);
  font-style: italic;
  margin-bottom: 16px;
  text-align: center;
}

.services-sub {
  font-size: 15px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.78;
  max-width: 560px;
  margin: 0 auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 48px;
}

.sv {
  background: var(--white);
  padding: 36px 28px;
  border: 1px solid var(--line);
  transition: all .3s;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.sv::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cl), var(--cd));
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left;
}

.sv:hover {
  background: var(--blush);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(139, 25, 54, .1);
}

.sv:hover::after {
  transform: scaleX(1);
}

.sv-ico {
  font-size: 32px;
  margin-bottom: 16px;
  display: block;
}

.sv-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.sv-desc {
  font-size: 12px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.6;
}

.sv-tag {
  display: inline-block;
  margin-top: 12px;
  background: var(--blush);
  color: var(--c);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 500;
}

.sv:hover .sv-tag {
  background: var(--c);
  color: #fff;
}

.sv.included {
  border-top: 2px solid var(--c);
}

.sv.optional {
  border-top: 2px solid var(--blush2);
}

/* ══════════════════════════
   COMPARISON TABLE
══════════════════════════ */
.compare {
  padding: 100px 0;
  background: var(--white);
}

.compare-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}

.compare-hdr {
  margin-bottom: 48px;
}

.compare-h {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 400;
  letter-spacing: -1.5px;
  margin-bottom: 12px;
}

.compare-h em {
  font-style: italic;
  color: var(--c);
}

.compare-sub-label {
  font-size: 13px;
  color: var(--coal);
  margin-bottom: 18px;
  font-weight: 300;
}

.compare-sub {
  font-size: 14px;
  font-weight: 300;
  color: var(--coal);
  max-width: 500px;
  line-height: 1.7;
}

.ct {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ct thead tr {
  background: linear-gradient(135deg, var(--cl), var(--c), var(--cd));
}

.ct thead th {
  padding: 18px 24px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  font-family: 'Nunito Sans', sans-serif;
  text-align: left;
  border: none;
}

.ct thead th:first-child {
  width: 220px;
  color: rgba(255, 255, 255, .6);
}

.ct thead th:nth-child(4) {
  background: rgba(255, 255, 255, .15);
  font-weight: 700;
}

.ct tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background .2s;
}

.ct tbody tr:hover {
  background: var(--blush);
}

.ct tbody tr.cat-row {
  background: var(--blush2);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 600;
}

.ct tbody tr.cat-row td {
  padding: 12px 24px;
}

.ct td {
  padding: 15px 24px;
  color: var(--coal);
  vertical-align: middle;
  font-weight: 300;
}

.ct td:first-child {
  font-weight: 500;
  color: var(--text);
  border-right: 1px solid var(--line);
}

.ct td:nth-child(4) {
  background: rgba(139, 25, 54, .03);
  border-left: 1px solid var(--line2);
}

.ct .yes {
  color: var(--c);
  font-size: 16px;
  font-weight: 700;
}

.ct .no {
  color: var(--line2);
  font-size: 16px;
}

.ct .extra {
  font-size: 11px;
  color: var(--coal);
  font-weight: 300;
}

.suite-badge {
  display: inline-block;
  background: var(--c);
  color: #fff;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 8px;
  vertical-align: middle;
  margin-left: 8px;
  font-weight: 600;
}

/* ══════════════════════════
   REVIEWS in habitaciones
══════════════════════════ */
.hab-reviews {
  padding: 100px 0;
  background: var(--cream);
}

.hab-reviews-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}

.hab-reviews-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 400;
  letter-spacing: -1.5px;
  margin-bottom: 10px;
}

.hab-reviews-h2 em {
  font-style: italic;
  color: var(--c);
}

.hab-reviews-h3 {
  font-size: 14px;
  font-weight: 300;
  color: var(--coal);
  font-style: italic;
  margin-bottom: 48px;
}

.rev-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}

.rvc {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 28px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  cursor: default;
}

.rvc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(139, 25, 54, .1);
}

.rvc-q {
  position: absolute;
  top: -14px;
  right: 16px;
  font-family: 'Playfair Display', serif;
  font-size: 86px;
  font-weight: 400;
  color: rgba(139, 25, 54, .06);
  line-height: 1;
  pointer-events: none;
}

.rvc-stars {
  color: var(--c);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.rvc-text {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  line-height: 1.62;
  margin-bottom: 22px;
}

.rvc-auth {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rvc-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}

.rvc-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.rvc-when {
  font-size: 11px;
  color: var(--coal);
}

/* ══════════════════════════
   LOCATION section in habitaciones
══════════════════════════ */
.hab-location {
  padding: 100px 0;
  background: var(--blush);
}

.hab-location-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}

.hab-loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hab-loc-h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--c);
  margin-bottom: 6px;
}

.hab-loc-h3b {
  font-size: 14px;
  font-weight: 300;
  color: var(--coal);
  font-style: italic;
  margin-bottom: 16px;
}

.hab-loc-body {
  font-size: 15px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.86;
  margin-bottom: 20px;
}

.hab-loc-pts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0 30px;
}

.hlpt {
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: all .25s;
  cursor: default;
}

.hlpt:hover {
  border-color: var(--c);
}

.hlpt-ic {
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--c);
}

.hlpt strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}

.hlpt span {
  font-size: 11px;
  color: var(--coal);
}

.hab-loc-img {
  height: 480px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 56px rgba(139, 25, 54, .12);
}

.hab-loc-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s;
}

.hab-loc-img:hover img {
  transform: scale(1.04);
}

.hab-loc-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  padding: 12px 16px;
}

.hab-loc-badge span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}

.hab-loc-badge small {
  font-size: 10px;
  color: var(--coal);
}

/* ══════════════════════════
   FAQ ACCORDION
══════════════════════════ */
.faq {
  padding: 100px 0;
  background: var(--white);
}

.faq-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}

.faq-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .22s;
}

.faq-item:first-child {
  border-top: 1px solid var(--line);
}

.faq-item:hover {
  background: var(--blush);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 20px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  user-select: none;
}

.faq-q h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  font-family: 'Nunito Sans', sans-serif;
}

.faq-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blush);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--c);
  flex-shrink: 0;
  transition: all .25s;
}

.faq-item.open .faq-ico {
  background: var(--c);
  color: #fff;
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.78;
  padding: 0 24px 0 0;
}

.faq-item.open .faq-a {
  max-height: 200px;
  padding: 0 24px 20px 0;
}

/* ══════════════════════════
   ATRACCIONES CERCANAS
══════════════════════════ */
.atracciones {
  padding: 100px 0;
  background: var(--white);
}

.atracciones-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}

.at-hdr {
  margin-bottom: 52px;
}

.at-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.at-h2 em {
  font-style: italic;
  color: var(--c);
}

.at-h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--c);
  margin-bottom: 4px;
}

.at-h3b {
  font-size: 14px;
  font-weight: 300;
  color: var(--coal);
  font-style: italic;
  margin-bottom: 16px;
}

.at-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.at-card {
  border: 1px solid var(--line);
  overflow: hidden;
  transition: all .3s;
  cursor: default;
}

.at-card:hover {
  border-color: var(--c);
  transform: translateY(-3px);
}

.at-img {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.at-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s;
}

.at-card:hover .at-img img {
  transform: scale(1.06);
}

.at-body {
  padding: 20px;
}

.at-cat {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 5px;
  font-weight: 500;
}

.at-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.at-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.6;
}

.at-dist {
  font-size: 11px;
  color: var(--coal);
  margin-top: 8px;
}

/* ══════════════════════════
   TIPOS DE HABITACIONES
══════════════════════════ */
.tipos-sec {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.tipos-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 56px 0;
}

.tipos-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin-bottom: 12px;
  color: var(--text);
}

.tipos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.tipo-card {
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
}

.tipo-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--c);
  margin-bottom: 8px;
}

.tipo-card p {
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.6;
}

/* ── gradient placeholders for images ── */
.ph-comfort {
  background: linear-gradient(145deg, #c8a882 0%, #a08060 40%, #7a5e45 100%);
}

.ph-twin {
  background: linear-gradient(140deg, #d5e0e8 0%, #a0b5c5 40%, #7090a8 80%, #405878 100%);
}

.ph-suite {
  background: linear-gradient(155deg, #3a1520 0%, #5a2030 35%, #8B1936 65%, #6a1028 100%);
}

.ph-suite2 {
  background: linear-gradient(145deg, #7C122E 0%, #a01838 60%, #B61D4A 100%);
}

.ph-bath {
  background: linear-gradient(145deg, #e8ece8 0%, #c8d0c8 40%, #a8b5a8 70%, #889588 100%);
}

.ph-lobby {
  background: linear-gradient(145deg, #c8a882 0%, #7a5e45 100%);
}

/* ══════════════════════════════════════════
   BREAKPOINT — TABLET (≤ 1100px)
══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .bc { padding: 16px 32px }

  .page-hero-inner { padding: 0 32px }
  .ph-text { padding: 52px 40px 52px 0 }

  .tipos-wrap { padding: 48px 32px 0 }

  .type-nav-wrap { padding: 0 32px }

  .rb-inner { padding: 0 32px 48px }
  .rb-num { right: 32px }

  .rd-wrap { padding: 56px 32px; gap: 48px }

  .services,
  .compare,
  .hab-reviews,
  .hab-location,
  .faq,
  .atracciones { padding: 72px 0 }

  .services-wrap { padding: 0 32px }
  .services-grid { grid-template-columns: repeat(2, 1fr) }

  .compare-wrap { padding: 0 32px }

  .hab-reviews-wrap { padding: 0 32px }
  .rev-row { grid-template-columns: 1fr 1fr }

  .hab-location-wrap { padding: 0 32px }
  .hab-loc-grid { gap: 48px }

  .faq-wrap { padding: 0 32px }
  .faq-cols { gap: 48px }

  .atracciones-wrap { padding: 0 32px }
  .at-grid { grid-template-columns: 1fr 1fr }
}

/* ══════════════════════════════════════════
   BREAKPOINT — MOBILE (≤ 768px)
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Breadcrumb ── */
  .bc { margin-top: 66px; padding: 12px 20px }

  /* ── Tipos de habitaciones ── */
  .tipos-wrap { padding: 40px 20px 0 }
  .tipos-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; padding-bottom: 28px }

  /* ── Page Hero ── */
  .page-hero-inner {
    grid-template-columns: 1fr;
    padding: 0 20px;
    min-height: auto
  }

  .ph-text {
    padding: 44px 0 36px;
    border-right: none;
    border-bottom: 1px solid var(--line)
  }

  .ph-photos { display: none }

  .ph-stat { padding: 0 16px }
  .ph-stat:first-child { padding-left: 0 }

  /* ── Type Nav ── */
  .type-nav { top: 66px }

  .type-nav-wrap {
    padding: 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  .type-nav-wrap::-webkit-scrollbar { display: none }

  .tn-tab { padding: 0 18px; white-space: nowrap }
  .tn-price-preview { display: none }

  .room-section { scroll-margin-top: 126px }

  /* ── Room Banner ── */
  .room-banner { height: 480px }

  .rb-inner { padding: 0 20px 36px }
  .rb-name { letter-spacing: -1px }
  .rb-tagline { font-size: 13px }
  .rb-num { display: none }

  /* ── Room Detail ── */
  .rd-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 20px
  }

  .rd-card { position: static }

  /* ── Gallery ── */
  .rd-gallery {
    grid-template-columns: 1fr 1fr
  }

  .rdg-main {
    grid-column: 1 / -1;
    height: 220px
  }

  .rdg-sm { min-height: 110px }

  /* ── Amenities ── */
  .amenities-grid { grid-template-columns: 1fr 1fr }
  .am-item:nth-child(3n) { border-right: 1px solid var(--line) }
  .am-item:nth-child(2n) { border-right: none }

  /* ── Services ── */
  .services { padding: 56px 0 }
  .services-wrap { padding: 0 20px }
  .services-grid { grid-template-columns: 1fr 1fr }
  .services-hdr { margin-bottom: 36px }

  /* ── Compare Table ── */
  .compare { padding: 56px 0 }
  .compare-wrap { padding: 0 20px; overflow-x: auto }
  .ct { min-width: 480px }

  /* ── Reviews ── */
  .hab-reviews { padding: 56px 0 }
  .hab-reviews-wrap { padding: 0 20px }
  .rev-row { grid-template-columns: 1fr }
  .hab-reviews-h3 { margin-bottom: 24px }

  /* ── Location ── */
  .hab-location { padding: 56px 0 }
  .hab-location-wrap { padding: 0 20px }

  .hab-loc-grid {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .hab-loc-img { height: 280px }
  .hab-loc-pts { grid-template-columns: 1fr 1fr }

  /* ── FAQ ── */
  .faq { padding: 56px 0 }
  .faq-wrap { padding: 0 20px }

  .faq-cols {
    grid-template-columns: 1fr;
    gap: 36px
  }

  /* ── Atracciones ── */
  .atracciones { padding: 56px 0 }
  .atracciones-wrap { padding: 0 20px }
  .at-grid { grid-template-columns: 1fr 1fr }
}

/* ══════════════════════════════════════════
   BREAKPOINT — MOBILE SMALL (≤ 480px)
══════════════════════════════════════════ */
@media (max-width: 480px) {
  .ph-stat { padding: 0 12px }

  .services-grid { grid-template-columns: 1fr }

  .at-grid { grid-template-columns: 1fr }

  .hab-loc-pts { grid-template-columns: 1fr }
}

/* ══════════════════════════════════════════════
   bw-restaurante.css — Restaurante Terraza 31
   ══════════════════════════════════════════════ */

:root { --line2: rgba(139,25,54,.18) }

/* ── HERO INTERIOR (restaurante, sin tarjeta precio) ── */
.hi-rest {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px 96px
}
.hi-rest > div { max-width: 700px }

/* ── SECCIÓN HORARIO ── */
.hours-section { padding: 100px 0; background: var(--blush) }
.hours-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.hours-cols { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center }
.hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px }
.hour-card { background: var(--white); border: 1px solid var(--line); padding: 26px 28px; transition: border-color .25s }
.hour-card:hover { border-color: var(--c) }
.hour-day { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--c); margin-bottom: 10px; font-weight: 500; display: block }
.hour-time { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 400; color: var(--text); line-height: 1.1; margin-bottom: 4px }
.hour-sub { font-size: 11px; color: var(--coal); font-weight: 300 }
.hour-img { height: 340px; overflow: hidden; position: relative; border-radius: 2px; box-shadow: 0 20px 48px rgba(139,25,54,.12) }
.hour-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s }
.hour-img:hover img { transform: scale(1.04) }

/* ── SECCIÓN MENÚ ── */
.menu-section { padding: 108px 0; background: var(--white) }
.menu-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.menu-hdr { max-width: 680px; margin-bottom: 52px }
.menu-h3 { font-size: 14px; font-weight: 500; color: var(--c); margin-bottom: 4px }
.menu-h3b { font-size: 14px; font-weight: 300; color: var(--coal); font-style: italic; margin-bottom: 8px }

/* Navegación de categorías */
.menu-nav {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 64px;
  overflow-x: auto
}
.mni {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--coal);
  padding: 13px 18px;
  transition: all .2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
  white-space: nowrap
}
.mni:hover { color: var(--c); border-bottom-color: var(--c) }

/* Categoría del menú */
.menu-cat { padding: 56px 0; border-bottom: 1px solid var(--line) }
.menu-cat:last-child { border-bottom: none }
.mcat-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 8px
}
.mcat-head::after { content: ''; flex: 1; height: 1px; background: var(--line) }
.mcat-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap
}
.mcat-sub { font-size: 12px; font-weight: 300; color: var(--coal); font-style: italic; margin-bottom: 28px }
.mcat-note {
  background: var(--blush);
  border: 1px solid var(--line);
  padding: 11px 18px;
  font-size: 12px;
  color: var(--coal);
  margin-bottom: 24px;
  display: flex;
  gap: 10px;
  align-items: center
}
.mcat-note i { color: var(--c) }

/* Items del menú */
.menu-items { display: flex; flex-direction: column }
.mi {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  gap: 24px;
  transition: background .18s;
  margin: 0 -12px
}
.mi:last-child { border-bottom: none }
.mi:hover { background: var(--blush) }
.mi-name { font-size: 14px; font-weight: 500; color: var(--text); display: block; margin-bottom: 3px }
.mi-desc { font-size: 12px; font-weight: 300; color: var(--coal); line-height: 1.6 }
.mi-price {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--c);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px
}
.mi-prices { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; flex-shrink: 0 }
.mi-price-sm { font-size: 12px; font-weight: 300; color: var(--coal); white-space: nowrap }
.mi-price-sm strong { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 400; color: var(--c) }

/* Menú en 2 columnas */
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px }

/* Imagen separador dentro del menú */
.menu-img {
  height: 260px;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  margin: 8px 0 0
}
.menu-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .65s }
.menu-img:hover img { transform: scale(1.04) }
.menu-img-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin: 8px 0 0 }
.menu-img-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px }

/* ── NOTA VEGETARIANO ── */
.veg-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0f7ee;
  border: 1px solid #bdd8b8;
  color: #3a6b35;
  font-size: 11px;
  font-weight: 500;
  padding: 7px 14px;
  margin-top: 16px
}

/* ══════════════════════════════════════════════
   RESPONSIVE — bw-restaurante
   ══════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .hi-rest { padding: 0 32px 72px }
  .hours-section { padding: 72px 0 }
  .hours-wrap { padding: 0 32px }
  .hours-cols { gap: 48px }
  .menu-section { padding: 72px 0 }
  .menu-wrap { padding: 0 32px }
}

@media (max-width: 768px) {
  .mcat-title { white-space: normal; font-size: 22px }
  .hi-rest { padding: 0 20px 52px }
  .hours-section { padding: 56px 0 }
  .hours-wrap { padding: 0 20px }
  .hours-cols { grid-template-columns: 1fr; gap: 32px }
  .menu-section { padding: 56px 0 }
  .menu-wrap { padding: 0 20px }
  .menu-cols { grid-template-columns: 1fr; gap: 0 }
  .menu-img-grid { grid-template-columns: 1fr }
  .menu-img-grid-2 { grid-template-columns: 1fr }
}

@media (max-width: 480px) {
  .hours-grid { grid-template-columns: 1fr }
  .menu-img-grid-2 { grid-template-columns: 1fr }
}

/* ══════════════════════════════════════════════
   bw-contacto.css — Página de Contacto
   ══════════════════════════════════════════════ */

/* ── HERO INTERIOR ── */
.hi-ct {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px 96px
}
.hi-ct > div { max-width: 680px }

.hk {
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  animation: fup .9s .1s ease both
}
.hk::before { content:''; width:28px; height:1px; background:rgba(255,255,255,.28) }
.hh1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(42px,5.2vw,76px);
  font-weight: 400;
  color: #fff;
  line-height: .95;
  letter-spacing: -2.5px;
  margin-bottom: 26px;
  animation: fup .9s .2s ease both
}
.hh1 em { font-style:italic; color:rgba(255,255,255,.42); display:block }
.hd {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.48);
  line-height: 1.82;
  max-width: 520px;
  margin-bottom: 36px;
  animation: fup .9s .32s ease both
}
.hbtns { display:flex; gap:14px; animation:fup .9s .42s ease both; flex-wrap:wrap }

/* ── CANALES DE CONTACTO ── */
.channels-section { padding: 96px 0; background: var(--white) }
.channels-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.channels-hdr { max-width: 680px; margin-bottom: 52px }
.channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-bottom: 52px
}
.ch-card {
  border: 1px solid var(--line);
  padding: 32px 28px;
  background: var(--cream);
  transition: all .25s;
  cursor: default;
  text-decoration: none;
  display: block
}
.ch-card:hover {
  background: var(--blush);
  border-color: var(--c);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(139,25,54,.09)
}
.ch-ico { font-size: 32px; margin-bottom: 18px }
.ch-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500;
  margin-bottom: 8px;
  display: block
}
.ch-value {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 8px
}
.ch-sub { font-size: 12px; font-weight: 300; color: var(--coal); line-height: 1.6 }
.ch-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c);
  letter-spacing: 1px
}
.ch-team-bar {
  background: var(--blush);
  border: 1px solid var(--line);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap
}

/* ── FORMULARIO + INFO ── */
.contact-section { padding: 100px 0; background: var(--blush) }
.contact-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.contact-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start }
.ct-form-head { margin-bottom: 36px }
.ct-form { display: flex; flex-direction: column; gap: 3px }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3px }
.ct-field {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0;
  transition: border-color .2s
}
.ct-field:focus-within { border-color: var(--c) }
.ct-field label {
  display: block;
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--coal);
  padding: 12px 16px 0;
  font-weight: 500
}
.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 6px 16px 12px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text);
  font-family: 'Nunito Sans', sans-serif;
  resize: none
}
.ct-field select { appearance: none; cursor: pointer }
.ct-field.full { grid-column: 1 / -1 }
.ct-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--cl), var(--c), var(--cd));
  color: #fff;
  padding: 18px 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-family: 'Nunito Sans', sans-serif;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity .3s;
  margin-top: 3px
}
.ct-submit:hover { opacity: .88 }
.ct-note { font-size: 11px; font-weight: 300; color: var(--coal); text-align: center; margin-top: 12px; line-height: 1.7 }

/* Panel de información */
.ct-info { padding-top: 4px }
.ct-info-block { background: var(--white); border: 1px solid var(--line); padding: 28px 28px; margin-bottom: 3px }
.ct-info-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500;
  margin-bottom: 14px;
  display: block
}
.ct-info-rows { display: flex; flex-direction: column; gap: 10px }
.ct-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.7
}
.ct-info-row i { color: var(--c); flex-shrink: 0; margin-top: 2px; width: 16px; text-align: center }
.ct-info-row strong { color: var(--text); font-weight: 500 }
.ct-info-row a { color: var(--c); font-weight: 500 }
.ct-info-row a:hover { text-decoration: underline }
.ct-schedule { width: 100%; margin-top: 8px }
.ct-schedule tr { border-bottom: 1px solid var(--line) }
.ct-schedule tr:last-child { border-bottom: none }
.ct-schedule td { padding: 9px 0; font-size: 12px; font-weight: 300; color: var(--coal) }
.ct-schedule td:last-child { text-align: right; font-weight: 500; color: var(--text) }
.ct-schedule .open { color: var(--c) !important }

/* ── FAQ (variante contacto) ── */
.faq-ct { background: var(--cream) }
.faq-ct-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.faq-ct-cols { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; padding: 100px 0 }
.faq-ct .faq-list { display:flex; flex-direction:column }
.faq-ct .faq-item { border-bottom:1px solid var(--line); cursor:pointer; transition:background .2s }
.faq-ct .faq-item:first-child { border-top:1px solid var(--line) }
.faq-ct .faq-item:hover { background:var(--blush) }
.faq-ct .faq-q { display:flex; align-items:center; justify-content:space-between; padding:19px 0; user-select:none }
.faq-ct .faq-q h3 { font-size:14px; font-weight:500; color:var(--text); font-family:'Nunito Sans',sans-serif }
.faq-ct .faq-ico { width:28px; height:28px; border-radius:50%; background:var(--blush); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--c); flex-shrink:0; transition:all .25s }
.faq-ct .faq-item.open .faq-ico { background:var(--c); color:#fff; transform:rotate(45deg) }
.faq-ct .faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s; font-size:13px; font-weight:300; color:var(--coal); line-height:1.78 }
.faq-ct .faq-item.open .faq-a { max-height:300px; padding-bottom:18px }

/* ── EQUIPO ── */
.team-section { padding: 96px 0; background: var(--blush) }
.team-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.team-hdr { max-width: 680px; margin-bottom: 48px }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px }
.team-card { background: var(--white); border: 1px solid var(--line); overflow: hidden; transition: all .25s; cursor: default }
.team-card:hover { border-color: var(--c); box-shadow: 0 8px 28px rgba(139,25,54,.09) }
.team-photo { aspect-ratio: 4/3; overflow: hidden; position: relative }
.team-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform .6s }
.team-card:hover .team-photo img { transform: scale(1.04) }
.team-info { padding: 18px 18px 22px }
.team-name { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 3px }
.team-role { font-size: 11px; font-weight: 300; color: var(--coal) }
.team-role-tag {
  display: inline-block;
  margin-top: 8px;
  background: var(--blush);
  border: 1px solid var(--line);
  padding: 3px 10px;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500
}

/* ── MAPA ── */
.map-ct-section { padding: 100px 0; background: var(--white) }
.map-ct-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.map-ct-cols { display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: start }
.map-ct-frame { position: relative; height: 460px; overflow: hidden; box-shadow: 0 20px 56px rgba(139,25,54,.12) }
.map-ct-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none }
.map-ct-links { display: flex; flex-direction: column; gap: 3px; margin-bottom: 28px }
.map-ct-phone { background: var(--blush); border: 1px solid var(--line); padding: 20px 22px }

/* Tipografía sección */
.sh2 { font-family:'Playfair Display',serif; font-size:clamp(28px,3vw,44px); font-weight:400; letter-spacing:-1.4px; line-height:1.05; margin-bottom:12px }
.sh2 em { font-style:italic; color:var(--c) }

/* ══════════════════════════════════════════════
   RESPONSIVE — bw-contacto
   ══════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .hi-ct { padding: 0 32px 72px }
  .channels-section { padding: 72px 0 }
  .channels-wrap { padding: 0 32px }
  .channels-grid { grid-template-columns: 1fr 1fr }
  .contact-section { padding: 72px 0 }
  .contact-wrap { padding: 0 32px }
  .contact-cols { gap: 48px }
  .faq-ct-wrap { padding: 0 32px }
  .faq-ct-cols { gap: 48px; padding: 72px 0 }
  .team-section { padding: 72px 0 }
  .team-wrap { padding: 0 32px }
  .map-ct-section { padding: 72px 0 }
  .map-ct-wrap { padding: 0 32px }
  .map-ct-cols { gap: 48px }
}

@media (max-width: 768px) {
  .hi-ct { padding: 0 20px 52px }
  .channels-section { padding: 56px 0 }
  .channels-wrap { padding: 0 20px }
  .contact-section { padding: 56px 0 }
  .contact-wrap { padding: 0 20px }
  .contact-cols { grid-template-columns: 1fr; gap: 32px }
  .ct-row { grid-template-columns: 1fr }
  .faq-ct-wrap { padding: 0 20px }
  .faq-ct-cols { grid-template-columns: 1fr; gap: 28px; padding: 56px 0 }
  .team-section { padding: 56px 0 }
  .team-wrap { padding: 0 20px }
  .team-grid { grid-template-columns: 1fr 1fr }
  .map-ct-section { padding: 56px 0 }
  .map-ct-wrap { padding: 0 20px }
  .map-ct-cols { grid-template-columns: 1fr }
  .map-ct-frame { height: 300px }
}

@media (max-width: 480px) {
  .channels-grid { grid-template-columns: 1fr }
  .team-grid { grid-template-columns: 1fr 1fr }
  .map-ct-frame { height: 240px }
}

/* ══════════════════════════════════════════════
   bw-superior-king.css  (habitación Superior King)
   ══════════════════════════════════════════════ */

/* ── HERO INNER 2-col (content + price card) ── */
.hi {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 56px 88px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: flex-end
}

/* Hero price card */
.hcard {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.14);
  padding: 36px 32px;
  animation: fup .9s .52s ease both
}
.hc-tag { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.45); display:block; margin-bottom:8px }
.hc-name { font-family:'Playfair Display',serif; font-size:26px; font-weight:400; color:#fff; margin-bottom:20px; line-height:1 }
.hc-pw { display:flex; align-items:baseline; gap:6px; margin-bottom:6px }
.hc-from { font-size:11px; color:rgba(255,255,255,.42); font-weight:300 }
.hc-price { font-family:'Playfair Display',serif; font-size:54px; font-weight:400; color:#fff; line-height:1 }
.hc-night { font-size:11px; color:rgba(255,255,255,.38); margin-bottom:22px }
.hc-perks { display:flex; flex-direction:column; gap:8px; border-top:1px solid rgba(255,255,255,.1); padding-top:18px; margin-bottom:20px }
.hcp { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:300; color:rgba(255,255,255,.6) }
.hcp::before { content:'✓'; color:var(--cl); font-weight:700; flex-shrink:0 }

/* ── STICKY BOOKING CARD ── */
.book-card {
  position: sticky;
  top: 96px;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 12px 48px rgba(139,25,54,.1)
}
.bc-head { background:linear-gradient(135deg,var(--cl),var(--c),var(--cd)); padding:28px 30px }
.bc-room { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.52); margin-bottom:6px }
.bc-name { font-family:'Playfair Display',serif; font-size:24px; font-weight:400; color:#fff; margin-bottom:14px; line-height:1 }
.bc-pw { display:flex; align-items:baseline; gap:6px }
.bc-from { font-size:11px; color:rgba(255,255,255,.48); font-weight:300 }
.bc-price { font-family:'Playfair Display',serif; font-size:46px; font-weight:400; color:#fff; line-height:1 }
.bc-night { font-size:11px; color:rgba(255,255,255,.38); margin-top:4px }
.bc-body { padding:24px 28px }
.bc-field { margin-bottom:11px; padding:13px 15px; background:var(--white); border:1px solid var(--line); cursor:pointer; transition:border-color .2s }
.bc-field:hover { border-color:var(--c) }
.bc-fl { font-size:8px; letter-spacing:2.5px; text-transform:uppercase; color:var(--coal); display:block; margin-bottom:5px }
.bc-fv { font-size:14px; font-weight:300; color:var(--text) }
.bc-fv em { color:var(--coal); font-style:normal; font-size:13px }
.bc-input {
  background:transparent; border:none; outline:none;
  color:var(--text); font-size:14px; font-weight:300;
  font-family:'Nunito Sans',sans-serif; width:100%;
  cursor:pointer; -webkit-appearance:none; appearance:none; padding:0
}
.bc-input[type="date"]::-webkit-calendar-picker-indicator { opacity:.4; cursor:pointer }
.bc-field:has(select) {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(89,86,96,.45)'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center
}
.bc-field.bc-error { border-color:var(--c); background:var(--blush) }
.bc-submit {
  width:100%; background:linear-gradient(135deg,var(--cl),var(--c),var(--cd));
  color:#fff; padding:16px 24px; font-size:11px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; font-family:'Nunito Sans',sans-serif;
  cursor:pointer; border:none; display:flex; align-items:center;
  justify-content:center; gap:10px; transition:opacity .3s; margin-bottom:11px
}
.bc-submit:hover { opacity:.88 }
.bc-tel { text-align:center; font-size:12px; font-weight:300; color:var(--coal) }
.bc-tel a { color:var(--c); font-weight:500 }
.bc-perks { border-top:1px solid var(--line); padding:18px 28px 22px; display:flex; flex-direction:column; gap:8px }
.bcp { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:300; color:var(--coal) }
.bcp::before {
  content:'✓'; width:18px; height:18px; border-radius:50%;
  background:var(--blush); color:var(--c); font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0
}
.bc-disc { background:var(--blush); padding:11px 28px; border-top:1px solid var(--line); text-align:center }
.bc-disc span { font-size:11px; color:var(--coal); font-weight:300 }
.bc-disc strong { color:var(--c); font-weight:600 }

/* ── LAYOUT ── */
.page-wrap { max-width:1440px; margin:0 auto; padding:80px 56px }
.two-col { display:grid; grid-template-columns:1.55fr 1fr; gap:80px; align-items:start }

/* ── SECTION TYPOGRAPHY ── */
.sh3 { font-size:14px; font-weight:500; color:var(--c); margin-bottom:4px }
.sh3b { font-size:14px; font-weight:300; color:var(--coal); font-style:italic; margin-bottom:16px }
.sbody { font-size:15px; font-weight:300; color:var(--coal); line-height:1.86; margin-bottom:20px }
.sbody strong { color:var(--text); font-weight:500 }
.sec-label { font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--c); margin-bottom:14px; display:block; padding-bottom:10px; border-bottom:1px solid var(--line) }

/* ── GALLERY ── */
.gallery { display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px; margin:22px 0 8px }
.g-main { height:300px; overflow:hidden; position:relative; border-radius:2px }
.g-main img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s }
.g-main:hover img { transform:scale(1.05) }
.g-col { display:flex; flex-direction:column; gap:8px }
.g-sm { flex:1; overflow:hidden; position:relative; min-height:140px; border-radius:2px }
.g-sm img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s }
.g-sm:hover img { transform:scale(1.06) }

/* ── SPECS GRID ── */
.spec-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border:1px solid var(--line); margin:24px 0 36px }
.spec { padding:22px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .22s; cursor:default }
.spec:hover { background:var(--blush) }
.spec:nth-child(3n) { border-right:none }
.spec:nth-last-child(-n+3) { border-bottom:none }
.spec-ico { font-size:22px; margin-bottom:10px }
.spec-label { font-size:11px; font-weight:600; color:var(--text); margin-bottom:3px }
.spec-val { font-size:12px; font-weight:300; color:var(--coal) }

/* ── AMENITIES GRID ── */
.am-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border:1px solid var(--line) }
.am { padding:16px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; transition:background .22s; cursor:default }
.am:hover { background:var(--blush) }
.am:nth-child(3n) { border-right:none }
.am-ico { font-size:18px; flex-shrink:0 }
.am-name { font-size:12px; font-weight:500; color:var(--text) }
.am-sub { font-size:10px; color:var(--coal) }
.am-tag { display:block; width:fit-content; background:var(--blush); color:var(--c); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:2px 8px; margin-top:3px; font-weight:500 }
.am-tag-gold { background:linear-gradient(90deg,var(--cl),var(--c)); color:#fff }

/* ── PILLS ── */
.h3-pills { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 28px }
.pill { background:var(--blush); border:1px solid var(--line); padding:8px 16px; font-size:12px; font-weight:300; color:var(--coal); cursor:default; transition:all .25s }
.pill:hover { border-color:var(--c); color:var(--c) }
.pill strong { color:var(--c); font-weight:600 }

/* ── PRICE TABLE ── */
.price-tbl { background:var(--white); border:1px solid var(--line); margin:24px 0 32px; overflow:hidden }
.pt-head { background:linear-gradient(135deg,var(--cl),var(--c),var(--cd)); padding:22px 28px; display:flex; justify-content:space-between; align-items:center }
.pt-head-l { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.55) }
.pt-head-r { font-family:'Playfair Display',serif; font-size:38px; font-weight:400; color:#fff; line-height:1 }
.pt-row { display:flex; justify-content:space-between; align-items:center; padding:16px 28px; border-bottom:1px solid var(--line); transition:background .2s; cursor:default }
.pt-row:last-child { border-bottom:none }
.pt-row:hover { background:var(--blush) }
.pt-row-label { font-size:13px; font-weight:400; color:var(--text) }
.pt-row-val { font-size:14px; font-weight:600; color:var(--c); font-family:'Playfair Display',serif }
.pt-row-val.yes { color:var(--c) }

/* ── REVIEW CARDS ── */
.rvc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px }
.rvc { background:var(--white); border:1px solid var(--line); padding:28px; transition:all .3s; position:relative; overflow:hidden; cursor:default }
.rvc:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(139,25,54,.1) }
.rvc-q { position:absolute; top:-14px; right:16px; font-family:'Playfair Display',serif; font-size:88px; font-weight:400; color:rgba(139,25,54,.06); line-height:1; pointer-events:none }
.rvc-stars { color:var(--c); font-size:13px; letter-spacing:2px; margin-bottom:12px }
.rvc-text { font-family:'Playfair Display',serif; font-size:17px; font-weight:400; font-style:italic; color:var(--text); line-height:1.62; margin-bottom:20px }
.rvc-auth { display:flex; align-items:center; gap:12px }
.rvc-av { width:38px; height:38px; border-radius:50%; background:var(--c); display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; font-weight:600; flex-shrink:0 }
.rvc-name { font-size:12px; font-weight:500; color:var(--text) }
.rvc-when { font-size:11px; color:var(--coal) }

/* ── FAQ SECTION WRAPPER ── */
.faq-sec { background:var(--cream); padding: 80px 0 }

/* ── LOCATION SECTION ── */
.loc-sec { padding:100px 0; background:var(--blush) }
.loc-sec .loc-wrap { background:transparent }

/* ── GALLERY ROW 2 ── */
.gallery-row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.gallery-row2-item { height:180px; overflow:hidden; position:relative; border-radius:2px }

/* ── GALLERY ROW 3 (Junior Suite) ── */
.gallery-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:8px }
.gallery-row3-item { height:160px; overflow:hidden; position:relative; border-radius:2px }
.gallery-row3-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* ── COMPARE BOX ── */
.cmp-box { background:var(--cream); border:1px solid var(--line); padding:24px; margin-top:16px }
.cmp-list { display:flex; flex-direction:column; gap:8px }

/* ══════════════════════════════════════════════
   RESPONSIVE — bw-superior-king
   ══════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .hi { padding: 36px 32px 72px; grid-template-columns: 1fr 320px; gap: 40px }
  .page-wrap { padding: 64px 32px }
  .two-col { gap: 48px }
  .rvc-grid { grid-template-columns: 1fr 1fr }
  .loc-sec { padding: 72px 0 }
}

@media (max-width: 768px) {
  .hi { padding: 128px 20px 52px; grid-template-columns: 1fr; align-items: flex-start }
  .hcard { display: none }
  .page-wrap { padding: 52px 20px }
  .two-col { grid-template-columns: 1fr; gap: 32px }
  .book-card { position: static }
  .gallery-row3 { grid-template-columns: 1fr 1fr }
  .spec-grid { grid-template-columns: 1fr 1fr }
  .spec:nth-child(3n) { border-right: 1px solid var(--line) }
  .spec:nth-last-child(-n+3) { border-bottom: 1px solid var(--line) }
  .spec:nth-child(2n) { border-right: none }
  .spec:nth-last-child(-n+2) { border-bottom: none }
  .am-grid { grid-template-columns: 1fr 1fr }
  .am:nth-child(3n) { border-right: 1px solid var(--line) }
  .am:nth-last-child(-n+3) { border-bottom: 1px solid var(--line) }
  .am:nth-child(2n) { border-right: none }
  .am:nth-last-child(-n+2) { border-bottom: none }
  .gallery { grid-template-columns: 1fr }
  .g-main { height: 220px }
  .gallery-row2 { grid-template-columns: 1fr }
  .rvc-grid { grid-template-columns: 1fr }
  .loc-sec { padding: 56px 0 }
}

@media (max-width: 480px) {
  .spec-grid { grid-template-columns: 1fr }
  .spec { border-right: none }
  .spec:nth-child(2n) { border-right: none }
  .spec:nth-last-child(-n+2) { border-bottom: 1px solid var(--line) }
  .spec:last-child { border-bottom: none }
  .am-grid { grid-template-columns: 1fr }
  .am { border-right: none }
  .am:nth-child(2n) { border-right: none }
  .am:nth-last-child(-n+2) { border-bottom: 1px solid var(--line) }
  .am:last-child { border-bottom: none }
  .gallery-row3 { grid-template-columns: 1fr }
}

/* ══════════════════════════════════════════════
   bw-eventos-salones — Salones y Eventos
   ══════════════════════════════════════════════ */

/* ── HERO INTERIOR (una sola columna) ── */
.hi-ev {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px 96px
}
.hi-ev > div { max-width: 700px }

/* ── SECCIÓN SALONES ── */
.salones-section {
  padding: 108px 0;
  background: var(--white)
}
.salones-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px
}
.salones-hdr { max-width: 680px; margin-bottom: 64px }

.salon-card {
  border: 1px solid var(--line);
  margin-bottom: 3px;
  overflow: hidden
}
.salon-card-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  align-items: stretch
}
.salon-card-inner.reverse { direction: rtl }
.salon-card-inner.reverse > * { direction: ltr }

.salon-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  min-height: 360px
}
.salon-gallery-main {
  grid-row: 1 / 3;
  overflow: hidden;
  position: relative
}
.salon-gallery-main img,
.salon-gallery-sm img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s
}
.salon-gallery-main:hover img,
.salon-gallery-sm:hover img { transform: scale(1.05) }
.salon-gallery-sm {
  overflow: hidden;
  position: relative
}

.salon-info {
  padding: 36px 40px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.salon-floor {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500;
  margin-bottom: 10px
}
.salon-name {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px
}
.salon-name em { font-style:italic; color:var(--c) }
.salon-tagline {
  font-size: 14px;
  font-weight: 300;
  color: var(--coal);
  font-style: italic;
  margin-bottom: 18px
}
.salon-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.82;
  margin-bottom: 24px
}

.cap-wrap { margin-bottom: 24px }
.cap-title {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500;
  margin-bottom: 12px;
  display: block
}
.cap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px
}
.cap-table thead tr {
  background: var(--c);
  color: #fff
}
.cap-table th {
  padding: 9px 14px;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: left
}
.cap-table th:first-child { width: 44% }
.cap-table td {
  padding: 10px 14px;
  color: var(--coal);
  border-bottom: 1px solid var(--line)
}
.cap-table td:first-child { font-weight: 500; color: var(--text) }
.cap-table td:not(:first-child) {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--c)
}
.cap-table tr:last-child td { border-bottom: none }
.cap-table tbody tr { transition: background .18s }
.cap-table tbody tr:hover { background: var(--blush) }

/* ── TARJETAS SUB-SALÓN ── */
.subsalon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 3px;
  margin-bottom: 80px
}
.subsalon-card {
  background: var(--blush);
  border: 1px solid var(--line);
  padding: 28px 24px;
  transition: all .25s;
  cursor: default
}
.subsalon-card:hover {
  background: var(--white);
  border-color: var(--c)
}
.subsalon-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500;
  margin-bottom: 14px;
  display: block
}
.subsalon-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1
}
.subsalon-rows {
  display: flex;
  flex-direction: column;
  gap: 8px
}
.subsalon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px
}
.subsalon-row:last-child { border-bottom: none }
.subsalon-row-label { color: var(--coal); font-weight: 300 }
.subsalon-row-val {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--c)
}

/* ── SERVICIOS INCLUIDOS ── */
.serv-inc-section {
  padding: 100px 0;
  background: var(--blush)
}
.serv-inc-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px
}
.serv-inc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center
}
.serv-inc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 28px
}
.serv-inc-item {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 20px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color .22s;
  cursor: default
}
.serv-inc-item:hover { border-color: var(--c) }
.serv-inc-ico { font-size: 22px; flex-shrink: 0; margin-top: 2px }
.serv-inc-name { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 3px }
.serv-inc-sub { font-size: 11px; font-weight: 300; color: var(--coal) }

/* ── SERVICIOS ADICIONALES ── */
.addserv-section {
  padding: 108px 0;
  background: var(--white)
}
.addserv-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px
}
.addserv-hdr { max-width: 680px; margin-bottom: 52px }
.addserv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px
}
.addserv-card {
  border: 1px solid var(--line);
  padding: 32px 28px;
  background: var(--cream);
  transition: all .25s;
  cursor: default;
  position: relative;
  overflow: hidden
}
.addserv-card:hover {
  background: var(--blush);
  border-color: var(--c)
}
.addserv-ico { font-size: 30px; margin-bottom: 18px }
.addserv-name {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.1
}
.addserv-body {
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.78
}
.addserv-tag {
  display: inline-block;
  background: var(--blush);
  border: 1px solid var(--line);
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500;
  margin-top: 16px
}
.addserv-card:hover .addserv-tag { background: var(--white) }

/* ── PARTNER SERVEM ── */
.servem-bar {
  background: linear-gradient(135deg, var(--cd), var(--c));
  padding: 36px 56px;
  max-width: 1440px;
  margin: 48px auto 0;
  display: flex;
  align-items: center;
  gap: 40px
}
.servem-logo-area {
  flex-shrink: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 14px 24px;
  min-width: 160px;
  text-align: center
}
.servem-logo-area span {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.5px
}
.servem-text {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.72);
  line-height: 1.78;
  flex: 1
}
.servem-text strong { color: #fff; font-weight: 500 }

/* ── PAQUETES CORPORATIVOS ── */
.pkgs-section {
  padding: 108px 0;
  background: var(--blush)
}
.pkgs-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px
}
.pkgs-hdr { max-width: 680px; margin-bottom: 52px }
.pkgs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px
}
.pkg-card {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: all .3s;
  cursor: default
}
.pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(139,25,54,.12)
}
.pkg-card.featured {
  border-color: var(--c);
  position: relative
}
.pkg-badge {
  background: var(--c);
  color: #fff;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 18px;
  text-align: center
}
.pkg-head { padding: 28px 28px 20px }
.pkg-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500;
  margin-bottom: 6px;
  display: block
}
.pkg-name {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px
}
.pkg-tagline {
  font-size: 12px;
  font-weight: 300;
  color: var(--coal);
  font-style: italic
}
.pkg-body { padding: 0 28px 28px }
.pkg-includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px
}
.pkg-includes li {
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  display: flex;
  align-items: flex-start;
  gap: 10px
}
.pkg-includes li::before {
  content: '✓';
  color: var(--c);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px
}

/* ── ALOJAMIENTO PARA INVITADOS ── */
.aloj-section {
  padding: 100px 0;
  background: var(--white)
}
.aloj-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px
}
.aloj-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center
}
.aloj-room-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  margin-top: 28px
}
.aloj-room {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 20px 18px;
  text-align: center;
  transition: all .22s;
  cursor: default
}
.aloj-room:hover { border-color: var(--c); background: var(--blush) }
.aloj-room-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px
}
.aloj-room-price {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--c)
}
.aloj-room-note { font-size: 10px; color: var(--coal); margin-top: 3px }

/* ── FAQ EVENTOS ── */
.faq-ev { background: var(--cream) }
.faq-ev-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px
}
.faq-ev-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
  padding: 100px 0
}
.faq-ev .faq-list { display:flex; flex-direction:column }
.faq-ev .faq-item { border-bottom:1px solid var(--line); cursor:pointer; transition:background .2s }
.faq-ev .faq-item:first-child { border-top:1px solid var(--line) }
.faq-ev .faq-item:hover { background:var(--blush) }
.faq-ev .faq-q { display:flex; align-items:center; justify-content:space-between; padding:19px 0; user-select:none }
.faq-ev .faq-q h3 { font-size:14px; font-weight:500; color:var(--text); font-family:'Nunito Sans',sans-serif }
.faq-ev .faq-ico { width:28px; height:28px; border-radius:50%; background:var(--blush); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--c); flex-shrink:0; transition:all .25s }
.faq-ev .faq-item.open .faq-ico { background:var(--c); color:#fff; transform:rotate(45deg) }
.faq-ev .faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s; font-size:13px; font-weight:300; color:var(--coal); line-height:1.78 }
.faq-ev .faq-item.open .faq-a { max-height:280px; padding-bottom:18px }

/* ══ RESPONSIVE — bw-eventos-salones ══ */

@media (max-width: 1100px) {
  .hi-ev { padding: 0 32px 72px }
  .salones-wrap { padding: 0 32px }
  .salones-section { padding: 72px 0 }
  .serv-inc-wrap { padding: 0 32px }
  .serv-inc-section { padding: 72px 0 }
  .addserv-wrap { padding: 0 32px }
  .addserv-section { padding: 72px 0 }
  .addserv-grid { grid-template-columns: 1fr 1fr }
  .servem-bar { padding: 28px 32px }
  .pkgs-wrap { padding: 0 32px }
  .pkgs-section { padding: 72px 0 }
  .pkgs-grid { grid-template-columns: 1fr 1fr }
  .aloj-wrap { padding: 0 32px }
  .aloj-section { padding: 72px 0 }
  .aloj-cols { gap: 48px }
  .serv-inc-cols { gap: 48px }
  .faq-ev-wrap { padding: 0 32px }
  .faq-ev-cols { padding: 72px 0; gap: 48px }
}

@media (max-width: 768px) {
  .hi-ev { padding: 0 20px 52px }
  .salones-section { padding: 56px 0 }
  .salones-wrap { padding: 0 20px }
  .salones-hdr { margin-bottom: 36px }
  .salon-card-inner { grid-template-columns: 1fr }
  .salon-card-inner.reverse { direction: ltr }
  .salon-gallery { min-height: 240px; grid-template-columns: 2fr 1fr }
  .salon-info { padding: 24px 20px }
  .subsalon-grid { grid-template-columns: 1fr; margin-bottom: 48px }
  .serv-inc-section { padding: 56px 0 }
  .serv-inc-wrap { padding: 0 20px }
  .serv-inc-cols { grid-template-columns: 1fr; gap: 32px }
  .serv-inc-list { grid-template-columns: 1fr }
  .addserv-section { padding: 56px 0 }
  .addserv-wrap { padding: 0 20px }
  .addserv-grid { grid-template-columns: 1fr }
  .servem-bar { flex-direction: column; padding: 28px 20px; gap: 20px; align-items: flex-start }
  .pkgs-section { padding: 56px 0 }
  .pkgs-wrap { padding: 0 20px }
  .pkgs-grid { grid-template-columns: 1fr }
  .aloj-section { padding: 56px 0 }
  .aloj-wrap { padding: 0 20px }
  .aloj-cols { grid-template-columns: 1fr; gap: 32px }
  .aloj-room-grid { grid-template-columns: 1fr 1fr }
  .faq-ev-wrap { padding: 0 20px }
  .faq-ev-cols { grid-template-columns: 1fr; padding: 56px 0; gap: 28px }
}

@media (max-width: 480px) {
  .salon-gallery { min-height: 200px }
  .aloj-room-grid { grid-template-columns: 1fr }
  .pkgs-grid { grid-template-columns: 1fr }
  .addserv-grid { grid-template-columns: 1fr }
  .serv-inc-list { grid-template-columns: 1fr }
}

/* ══════════════════════════════════════════════
   bw-reservas-ofertas — Reservas & Ofertas
   ══════════════════════════════════════════════ */

/* ── HERO: tarjeta descuento ── */
.hc-disc {
  display:flex; align-items:center; gap:14px;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:20px
}
.hc-disc-val { font-family:'Playfair Display',serif; font-size:48px; font-weight:400; color:#fff; line-height:1 }
.hc-disc-lbl { font-size:12px; font-weight:300; color:rgba(255,255,255,.5); line-height:1.5 }

/* ── LAYOUT ── */
.two-col-rev { display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:start }

/* ── IMAGEN SECCIÓN ── */
.sec-img {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg,#180c10,#3a1520)
}
.sec-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s }
.sec-img:hover img { transform:scale(1.04) }
.sec-img-badge {
  position:absolute; bottom:20px; right:20px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border:1px solid var(--line); padding:12px 18px; text-align:center
}
.sec-img-badge strong { font-family:'Playfair Display',serif; font-size:30px; color:var(--c); display:block; line-height:1 }
.sec-img-badge span { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--coal) }

/* ── TABLA DESCUENTOS POR NOCHES ── */
.disc-tbl { border:1px solid var(--line); overflow:hidden; margin:24px 0 32px }
.dt-head { background:linear-gradient(135deg,var(--cl),var(--c),var(--cd)); padding:18px 24px; display:flex; justify-content:space-between; align-items:center }
.dt-head-l { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.55) }
.dt-head-r { font-size:11px; color:rgba(255,255,255,.7); font-weight:300 }
.dt-row { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; border-bottom:1px solid var(--line); transition:background .2s; cursor:default }
.dt-row:last-child { border-bottom:none }
.dt-row:hover { background:var(--blush) }
.dt-dur { font-size:13px; font-weight:400; color:var(--text) }
.dt-disc { font-family:'Playfair Display',serif; font-size:22px; font-weight:400; color:var(--c) }
.dt-disc.base { font-size:14px; font-weight:300; color:var(--coal); font-family:'Nunito Sans',sans-serif }
.dt-note { font-size:11px; color:var(--coal); font-weight:300; margin-top:-16px; margin-bottom:24px; padding:0 2px }

/* ── TARJETAS RESERVA ANTICIPADA ── */
.adv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0 28px }
.adv-card {
  background:var(--white); border:1px solid var(--line); padding:24px 18px;
  text-align:center; transition:all .3s; cursor:default; position:relative; overflow:hidden
}
.adv-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(139,25,54,.1); border-color:var(--c) }
.adv-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--cl),var(--c))
}
.adv-days { font-family:'Playfair Display',serif; font-size:36px; font-weight:400; color:var(--c); line-height:1; margin-bottom:2px }
.adv-unit { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--coal); margin-bottom:14px; display:block }
.adv-save { font-family:'Playfair Display',serif; font-size:26px; font-weight:400; color:var(--text); margin-bottom:4px }
.adv-lbl { font-size:11px; font-weight:300; color:var(--coal) }

/* ── CONDICIONES ── */
.cond-list { display:flex; flex-direction:column; gap:8px; margin:16px 0 24px }
.cond-item { display:flex; align-items:flex-start; gap:10px; font-size:12px; font-weight:300; color:var(--coal); line-height:1.6 }
.cond-item::before { content:'·'; color:var(--c); font-size:20px; line-height:.85; flex-shrink:0 }

/* ── SECCIÓN CORPORATIVA ── */
.corp-sec { background:var(--cream); padding:100px 0 }
.corp-wrap { max-width:1440px; margin:0 auto; padding:0 56px }
.corp-hdr { text-align:center; max-width:640px; margin:0 auto 52px }
.corp-hdr .sh2 { margin-bottom:8px }
.corp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.corp-card {
  background:var(--white); border:1px solid var(--line); overflow:hidden;
  transition:all .3s; cursor:default
}
.corp-card:hover { transform:translateY(-6px); box-shadow:0 18px 48px rgba(139,25,54,.12) }
.corp-card.featured { border-color:var(--c); box-shadow:0 8px 32px rgba(139,25,54,.12) }
.corp-head { padding:28px 28px 20px; border-bottom:1px solid var(--line) }
.corp-head.grad { background:linear-gradient(135deg,var(--cl),var(--c),var(--cd)) }
.corp-badge { display:inline-block; background:var(--blush); color:var(--c); font-size:8px; letter-spacing:2px; text-transform:uppercase; padding:3px 10px; margin-bottom:12px; font-weight:600 }
.corp-badge.inv { background:rgba(255,255,255,.18); color:#fff }
.corp-name { font-family:'Playfair Display',serif; font-size:22px; font-weight:400; color:var(--text); margin-bottom:4px }
.corp-name.wh { color:#fff }
.corp-cap { font-size:12px; font-weight:300; color:var(--coal) }
.corp-cap.wh { color:rgba(255,255,255,.6) }
.corp-body { padding:24px 28px 28px }
.corp-feats { display:flex; flex-direction:column; gap:8px; margin-bottom:22px }
.corp-feat { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:300; color:var(--coal) }
.corp-feat::before { content:'✓'; width:16px; height:16px; border-radius:50%; background:var(--blush); color:var(--c); font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0 }

/* ── RESERVA ANTICIPADA SECTION ── */
.anticipada-sec { background:var(--cream); padding:100px 0 }
.anticipada-wrap { max-width:1440px; margin:0 auto; padding:0 56px }

/* ── BOOKING BAR ── */
.booking { background:var(--c); padding:48px 56px }
.bk-wrap { max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:40px; flex-wrap:wrap }
.bk-h { font-family:'Playfair Display',serif; font-size:clamp(24px,2.5vw,36px); font-weight:400; color:#fff; line-height:1.05; letter-spacing:-1px }
.bk-h em { font-style:italic; color:rgba(255,255,255,.55) }
.bk-sub-txt { font-size:12px; font-weight:300; color:rgba(255,255,255,.55); margin-top:6px }
.bk-form { display:flex; gap:3px; flex:1; min-width:0; flex-wrap:wrap }
.bk-field { flex:1; min-width:120px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); padding:14px 18px; cursor:pointer; transition:background .2s }
.bk-field:hover { background:rgba(255,255,255,.16) }
.bk-label { font-size:8px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.45); display:block; margin-bottom:4px }
.bk-val { font-size:13px; font-weight:300; color:rgba(255,255,255,.75) }
.bk-btn { background:#fff; color:var(--c); border:none; padding:14px 28px; font-family:'Nunito Sans',sans-serif; font-size:13px; font-weight:600; letter-spacing:.5px; cursor:pointer; transition:all .2s; white-space:nowrap }
.bk-btn:hover { background:var(--blush); transform:translateY(-1px) }

/* ══ RESPONSIVE — bw-reservas-ofertas ══ */

@media (max-width: 1100px) {
  .two-col-rev { gap: 48px }
  .anticipada-sec { padding: 72px 0 }
  .anticipada-wrap { padding: 0 32px }
  .corp-sec { padding: 72px 0 }
  .corp-wrap { padding: 0 32px }
  .corp-grid { grid-template-columns: 1fr 1fr; gap: 16px }
  .booking { padding: 40px 32px }
}

@media (max-width: 768px) {
  .two-col-rev { grid-template-columns: 1fr; gap: 32px }
  .anticipada-sec { padding: 56px 0 }
  .anticipada-wrap { padding: 0 20px }
  .adv-grid { gap: 8px }
  .corp-sec { padding: 56px 0 }
  .corp-wrap { padding: 0 20px }
  .corp-grid { grid-template-columns: 1fr }
  .booking { padding: 36px 20px }
  .bk-wrap { gap: 24px }
  .bk-form { flex-direction: column }
  .bk-field { min-width: unset }
}

@media (max-width: 480px) {
  .adv-grid { grid-template-columns: 1fr }
  .hcard { padding: 20px 16px }
  .hc-disc-val { font-size: 40px }
}

/* ══════════════════════════════════════════════
   bw-ubicacion — Página de Ubicación
   ══════════════════════════════════════════════ */

/* ── HERO (single col) ── */
.hi-loc {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px 96px
}
.hi-loc > div { max-width: 680px }

/* ── CÓMO LLEGAR ── */
.arr-section { padding: 96px 0; background: var(--white) }
.arr-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.arr-hdr { max-width: 680px; margin-bottom: 52px }
.arr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-bottom: 56px
}
.arr-card {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 32px 28px;
  transition: all .25s;
  cursor: default
}
.arr-card:hover { background: var(--blush); border-color: var(--c) }
.arr-ico { font-size: 28px; color: var(--c); margin-bottom: 16px }
.arr-label {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.1
}
.arr-body { font-size: 13px; font-weight: 300; color: var(--coal); line-height: 1.78; margin-bottom: 14px }
.arr-tag {
  display: inline-block;
  background: var(--blush);
  border: 1px solid var(--line);
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500
}

/* Dirección */
.dir-box {
  background: var(--blush);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c);
  padding: 22px 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px
}
.dir-ico { font-size: 22px; color: var(--c); flex-shrink: 0; margin-top: 2px }
.dir-body { font-size: 14px; font-weight: 300; color: var(--coal); line-height: 1.82 }
.dir-body strong { color: var(--text); font-weight: 500 }

/* ── SITIOS DE INTERÉS (POI) ── */
.poi-section { padding: 100px 0; background: var(--blush) }
.poi-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.poi-hdr { max-width: 680px; margin-bottom: 52px }
.poi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px
}
.poi-cat { background: var(--white); border: 1px solid var(--line); padding: 28px 24px }
.poi-cat-ico { font-size: 24px; margin-bottom: 10px }
.poi-cat-title {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line)
}
.poi-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px
}
.poi-list li {
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px
}
.poi-list li::before { content: '•'; color: var(--c); flex-shrink: 0; margin-top: 1px }
.poi-dist { display: block; font-size: 10px; color: var(--c); font-weight: 500; margin-top: 2px }

/* ── ATRACCIONES TURÍSTICAS ── */
.attr-section { padding: 108px 0; background: var(--white) }
.attr-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.attr-hdr { max-width: 680px; margin-bottom: 52px }
.attr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px
}
.attr-card {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: all .25s;
  cursor: default
}
.attr-card:hover {
  background: var(--blush);
  border-color: var(--c);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(139,25,54,.09)
}
.attr-num {
  position: absolute;
  top: -8px;
  right: 16px;
  font-family: 'Playfair Display', serif;
  font-size: 72px;
  font-weight: 400;
  color: rgba(139,25,54,.06);
  line-height: 1;
  pointer-events: none;
  user-select: none
}
.attr-ico { font-size: 24px; margin-bottom: 14px }
.attr-name {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.15
}
.attr-dist {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500;
  margin-bottom: 10px
}
.attr-body { font-size: 12px; font-weight: 300; color: var(--coal); line-height: 1.72 }

/* ── BENEFICIOS DE LA UBICACIÓN ── */
.ben-section { padding: 100px 0; background: var(--blush) }
.ben-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.ben-hdr { max-width: 680px; margin-bottom: 52px }
.ben-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px
}
.ben-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 36px 32px;
  transition: all .25s;
  cursor: default
}
.ben-card:hover { border-color: var(--c); box-shadow: 0 8px 28px rgba(139,25,54,.08) }
.ben-ico { font-size: 32px; margin-bottom: 18px }
.ben-label {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.1
}
.ben-body { font-size: 14px; font-weight: 300; color: var(--coal); line-height: 1.82; margin-bottom: 18px }
.ben-tag {
  display: inline-block;
  background: var(--blush);
  border: 1px solid var(--line);
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 500
}

/* ── MAPA INTERACTIVO ── */
.map-section { padding: 100px 0; background: var(--white) }
.map-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.map-cols {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 72px;
  align-items: start
}
.map-info { padding-top: 12px }
.map-frame {
  position: relative;
  height: 480px;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(139,25,54,.12)
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none }
.map-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px }
.map-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  transition: all .22s;
  cursor: pointer
}
.map-btn:hover { background: var(--blush); border-color: var(--c); color: var(--c) }
.map-btn i { color: var(--c); font-size: 16px; flex-shrink: 0 }
.map-contact {
  background: var(--blush);
  border: 1px solid var(--line);
  padding: 18px 22px;
  margin-top: 28px
}

/* ══ RESPONSIVE — bw-ubicacion ══ */

@media (max-width: 1100px) {
  .hi-loc { padding: 0 32px 72px }
  .arr-section { padding: 72px 0 }
  .arr-wrap { padding: 0 32px }
  .arr-grid { grid-template-columns: 1fr 1fr }
  .poi-section { padding: 72px 0 }
  .poi-wrap { padding: 0 32px }
  .poi-grid { grid-template-columns: 1fr 1fr }
  .attr-section { padding: 72px 0 }
  .attr-wrap { padding: 0 32px }
  .attr-grid { grid-template-columns: 1fr 1fr }
  .ben-section { padding: 72px 0 }
  .ben-wrap { padding: 0 32px }
  .map-section { padding: 72px 0 }
  .map-wrap { padding: 0 32px }
  .map-cols { gap: 48px }
}

@media (max-width: 768px) {
  .hi-loc { padding: 0 20px 52px }
  .arr-section { padding: 56px 0 }
  .arr-wrap { padding: 0 20px }
  .arr-grid { grid-template-columns: 1fr }
  .poi-section { padding: 56px 0 }
  .poi-wrap { padding: 0 20px }
  .poi-grid { grid-template-columns: 1fr }
  .attr-section { padding: 56px 0 }
  .attr-wrap { padding: 0 20px }
  .attr-grid { grid-template-columns: 1fr }
  .ben-section { padding: 56px 0 }
  .ben-wrap { padding: 0 20px }
  .ben-grid { grid-template-columns: 1fr }
  .map-section { padding: 56px 0 }
  .map-wrap { padding: 0 20px }
  .map-cols { grid-template-columns: 1fr }
  .map-frame { height: 300px }
}

@media (max-width: 480px) {
  .arr-grid { grid-template-columns: 1fr }
  .poi-grid { grid-template-columns: 1fr }
  .attr-grid { grid-template-columns: 1fr }
  .ben-grid { grid-template-columns: 1fr }
  .map-frame { height: 240px }
}

/* ══════════════════════════════════════════════
   FAQ  ·  faq.php
   ══════════════════════════════════════════════ */

/* ── PAGE HEADER (hero compacto) ── */
.ph-sec {
  position: relative;
  height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #180c10
}
.ph-bg { position:absolute; inset:0; overflow:hidden }
.ph-bg img { width:100%; height:100%; object-fit:cover; display:block; opacity:.45 }
.ph-bg::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,3,8,.92) 0%, rgba(10,3,8,.2) 100%)
}
.ph-wrap {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 56px 72px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: flex-end
}
.ph-sec .ph-kicker {
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  animation: fup .9s .1s ease both
}
.ph-sec .ph-kicker::before { content:''; width:28px; height:1px; background:rgba(255,255,255,.28) }
.ph-sec .ph-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px,4.5vw,64px);
  font-weight: 400;
  color: #fff;
  line-height: .95;
  letter-spacing: -2.5px;
  margin-bottom: 20px;
  animation: fup .9s .2s ease both
}
.ph-sec .ph-h1 em { font-style:italic; color:rgba(255,255,255,.38); display:block }
.ph-sec .ph-sub {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.44);
  line-height: 1.8;
  max-width: 480px;
  animation: fup .9s .32s ease both
}
.ph-sec .ph-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fup .9s .42s ease both
}
.ph-sec .ph-stat {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px 24px;
  text-align: center;
  min-width: 120px
}
.ph-sec .ph-stat-val { font-family:'Playfair Display',serif; font-size:28px; font-weight:400; color:#fff; line-height:1 }
.ph-sec .ph-stat-lbl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:4px }

/* ── CATEGORY NAV (sticky) ── */
.cat-nav {
  position: sticky;
  top: 76px;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(0,0,0,.06)
}
.cat-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  gap: 0;
  overflow-x: auto
}
.cat-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 24px;
  font-size: 12px;
  font-weight: 500;
  color: var(--coal);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  white-space: nowrap;
  flex-shrink: 0
}
.cat-tab i { font-size:13px; color:var(--c) }
.cat-tab:hover { color:var(--c); border-bottom-color:var(--line2) }
.cat-tab.active { color:var(--c); border-bottom-color:var(--c) }

/* ── FAQ SECTIONS ── */
.fps {
  padding: 80px 0;
  border-bottom: 1px solid var(--line)
}
.fps:nth-child(even) { background: var(--cream) }
.fps:nth-child(odd)  { background: var(--white) }
.fps-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start
}
.fps-aside { position: sticky; top: 140px }
.fps-ico-wrap {
  width: 56px;
  height: 56px;
  background: var(--blush);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c);
  font-size: 22px;
  margin-bottom: 22px
}
.fps-num {
  font-family: 'Playfair Display', serif;
  font-size: 80px;
  font-weight: 400;
  color: var(--line);
  line-height: 1;
  margin-bottom: -16px
}
.fps-count { font-size:11px; font-weight:300; color:var(--coal); margin-top:16px }
.fps-count strong { color:var(--c); font-weight:600 }
.fps-img {
  height: 180px;
  overflow: hidden;
  margin-top: 24px;
  background: linear-gradient(150deg,#180c10,#3a1520)
}
.fps-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s }
.fps-img:hover img { transform:scale(1.05) }

/* ── CONTACT CTA SECTION ── */
.faq-contact {
  background: var(--blush);
  padding: 80px 0
}
.faq-contact-hdr-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  margin-bottom: 48px
}
.faq-contact-hdr { text-align: center; max-width: 560px; margin: 0 auto 48px }
.faq-contact-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px
}
.fcc {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 36px 32px;
  transition: all .3s
}
.fcc:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(139,25,54,.08); border-color: var(--line2) }
.fcc-ico { width:48px; height:48px; background:var(--blush); border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; color:var(--c); font-size:20px; margin-bottom:20px }
.fcc-name { font-size:15px; font-weight:600; color:var(--text); margin-bottom:8px }
.fcc-val { font-size:13px; font-weight:300; color:var(--coal); margin-bottom:18px; line-height:1.65 }
.fcc-link { font-size:12px; font-weight:500; color:var(--c); text-decoration:none; display:flex; align-items:center; gap:6px }
.fcc-link:hover { text-decoration:underline }
.fcc-link i { font-size:11px }

/* ── SEARCH / TOPIC CHIPS ── */
.faq-search-bar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 20px 0
}
.faq-search-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  align-items: center;
  gap: 16px
}
.faq-search-lbl { font-size:11px; font-weight:500; color:var(--coal); white-space:nowrap; letter-spacing:.5px }
.faq-search-chips { display:flex; gap:8px; flex-wrap:wrap }
.faq-chip {
  padding: 5px 14px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--coal);
  background: var(--white);
  cursor: default;
  transition: all .2s;
  text-decoration: none
}
.faq-chip:hover, .faq-chip.active { background:var(--blush); border-color:var(--c); color:var(--c) }

/* ── PROMO BUTTONS ── */
.promo-btns { display:flex; gap:14px; flex-wrap:wrap }

/* ══════════════════════════════════════════════
   RESPONSIVE — faq.php
   ══════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .cat-nav-inner { padding: 0 32px }
  .faq-search-inner { padding: 0 32px }
  .ph-wrap { padding: 0 32px 56px }
  .fps-wrap { padding: 0 32px; gap: 48px; grid-template-columns: 260px 1fr }
  .faq-contact-hdr-wrap { padding: 0 32px }
  .faq-contact-wrap { padding: 0 32px }
  .faq-contact { padding: 72px 0 }
}

@media (max-width: 768px) {
  .ph-sec { height: auto; align-items: flex-start; padding-top: 80px }
  .ph-wrap { grid-template-columns: 1fr; padding: 0 20px 48px; gap: 28px }
  .ph-sec .ph-stats { flex-direction: row; flex-wrap: wrap }
  .ph-sec .ph-stat { min-width: 80px; flex: 1 }
  .cat-nav-inner { padding: 0 20px }
  .faq-search-inner { padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 10px }
  .fps { padding: 52px 0 }
  .fps-wrap { grid-template-columns: 1fr; padding: 0 20px; gap: 32px }
  .fps-aside { position: static }
  .fps-img { display: none }
  .fps-num { font-size: 52px; margin-bottom: -8px }
  .faq-contact { padding: 56px 0 }
  .faq-contact-hdr-wrap { padding: 0 20px }
  .faq-contact-wrap { grid-template-columns: 1fr; padding: 0 20px }
}

@media (max-width: 480px) {
  .ph-sec .ph-stats { display: none }
  .faq-search-chips { gap: 6px }
}

/* ══════════════════════════════════════════════
   OVERRIDES GLOBALES — Astra defaults
   ══════════════════════════════════════════════ */

a:hover,
a:focus {
  color: #fff;
}



/* ══════════════════════════════════════════════
   TÉRMINOS Y CONDICIONES  ·  terminos.php
   ══════════════════════════════════════════════ */

.legal-sec {
  padding: 72px 0 100px;
  background: var(--white)
}
.legal-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 72px;
  align-items: start
}
.legal-toc {
  position: sticky;
  top: 100px;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 32px 28px
}
.legal-toc-title {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line)
}
.legal-toc-list { list-style: none; display: flex; flex-direction: column; gap: 2px }
.legal-toc-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--coal);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all .2s;
  line-height: 1.4
}
.legal-toc-link span { font-size: 10px; color: var(--c); font-weight: 600; flex-shrink: 0 }
.legal-toc-link:hover { color: var(--c); border-left-color: var(--c); background: var(--blush) }
.legal-meta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.7
}
.legal-meta strong { color: var(--text); font-weight: 500 }
.legal-main { display: flex; flex-direction: column; gap: 56px }
.legal-art { scroll-margin-top: 110px }
.legal-art-hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line)
}
.legal-art-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--line);
  line-height: 1;
  flex-shrink: 0
}
.legal-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -.6px;
  color: var(--text);
  line-height: 1.15
}
.legal-h2 em { font-style: italic; color: var(--c) }
.legal-body {
  font-size: 14px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.9;
  margin-bottom: 14px
}
.legal-body strong { color: var(--text); font-weight: 500 }
.legal-h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 20px 0 8px;
  font-family: 'Nunito Sans', sans-serif
}
.legal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px
}
.legal-list li {
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.7;
  padding-left: 18px;
  position: relative
}
.legal-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--c)
}
.legal-note {
  background: var(--blush);
  border-left: 3px solid var(--c);
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.75;
  margin-top: 12px
}
.legal-note strong { color: var(--text); font-weight: 500 }

/* ══════════════════════════════════════════════
   RESPONSIVE — terminos.php
   ══════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .legal-wrap { padding: 0 32px; gap: 48px; grid-template-columns: 240px 1fr }
  .legal-sec { padding: 56px 0 80px }
}

@media (max-width: 768px) {
  .legal-sec { padding: 40px 0 64px }
  .legal-wrap { grid-template-columns: 1fr; padding: 0 20px; gap: 36px }
  .legal-toc { position: static }
  .legal-toc-list { flex-direction: row; flex-wrap: wrap; gap: 4px }
  .legal-toc-link { border-left: none; border-bottom: 2px solid transparent; padding: 5px 8px }
  .legal-toc-link:hover { border-left-color: transparent; border-bottom-color: var(--c) }
}

@media (max-width: 480px) {
  .legal-toc-list { flex-direction: column }
  .legal-art-num { font-size: 28px }
}

/* ══════════════════════════════════════════════
   BLOG — home.php  ·  single.php
   Best Western Plus Hotel San Diego Medellín
   ══════════════════════════════════════════════ */

/* ── Filter bar ── */
.blog-filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 76px;
  z-index: 50
}
.blog-filter-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none
}
.blog-filter-inner::-webkit-scrollbar { display: none }
.blog-filter-tab {
  padding: 16px 22px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--coal);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .2s;
  flex-shrink: 0
}
.blog-filter-tab:hover,
.blog-filter-tab.active { color: var(--c); border-bottom-color: var(--c) }

/* ── Blog section ── */
.blog-sec { padding: 80px 0 100px; background: var(--cream) }
.blog-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }

/* ── Blog grid ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 64px
}

/* ── Featured card (first post) ── */
.blog-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  overflow: hidden
}
.blog-card--featured .blog-card-img-wrap { aspect-ratio: 16/9 }
.blog-card--featured .blog-card-body {
  padding: 52px 56px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center
}
.blog-card--featured .blog-card-title { font-size: clamp(22px, 2.4vw, 34px) }
.blog-card--featured .blog-card-excerpt { -webkit-line-clamp: 4 }

/* ── Regular card ── */
.blog-card {
  background: var(--white);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(24,12,16,.1) }
.blog-card-img-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative
}
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease }
.blog-card:hover .blog-card-img { transform: scale(1.04) }
.blog-card-cat {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--grad);
  color: #fff;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 5px 13px;
  font-weight: 600
}
.blog-card-body { padding: 28px 30px 32px }
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  color: var(--coal);
  font-weight: 300;
  margin-bottom: 14px
}
.blog-card-meta i { margin-right: 5px; color: var(--c) }
.blog-card-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.4px;
  margin-bottom: 12px
}
.blog-card-title a { color: var(--text); transition: color .2s }
.blog-card-title a:hover { color: var(--c) }
.blog-card-excerpt {
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.78;
  margin-bottom: 22px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden
}
.blog-card-link {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .2s
}
.blog-card-link:hover { gap: 14px }

/* ── Pagination ── */
.blog-pagination { display: flex; justify-content: center }
.blog-pagination .nav-links { display: flex; align-items: center; gap: 8px }
.blog-pagination .page-numbers {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 300;
  color: var(--coal);
  border: 1px solid var(--line);
  transition: all .2s
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current { background: var(--c); color: #fff; border-color: var(--c) }
.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next { width: auto; padding: 0 18px; font-size: 11px; letter-spacing: 1.5px }

/* ── Empty state ── */
.blog-empty { text-align: center; padding: 100px 20px; max-width: 480px; margin: 0 auto }
.blog-empty i { font-size: 48px; color: var(--blush2); margin-bottom: 28px; display: block }
.blog-empty h2 { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 400; margin-bottom: 14px }
.blog-empty p { font-size: 14px; color: var(--coal); line-height: 1.8; margin-bottom: 32px }

/* ── Blog CTA ── */
.blog-cta { background: var(--grad); padding: 100px 0 }
.blog-cta-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px; text-align: center }
.blog-cta-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  line-height: 1
}
.blog-cta-sub {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.62);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto
}
.blog-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }

/* ══ SINGLE POST ══ */

/* ── Post hero ── */
.post-hero {
  height: 70vh;
  min-height: 540px;
  max-height: 760px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: 76px
}
.post-hero-bg { position: absolute; inset: 0 }
.post-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center }
.post-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(24,12,16,.04) 0%, rgba(24,12,16,.7) 55%, rgba(24,12,16,.95) 100%),
    linear-gradient(90deg, rgba(24,12,16,.8) 0%, rgba(24,12,16,.3) 60%, transparent 90%)
}
.post-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 56px 72px
}
.post-hero-cat { margin-bottom: 16px }
.post-hero-cat a {
  background: var(--grad);
  color: #fff;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 5px 14px;
  font-weight: 600
}
.post-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4.5vw, 66px);
  font-weight: 400;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -2px;
  max-width: 860px;
  margin-bottom: 24px
}
.post-hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 300;
  flex-wrap: wrap
}
.post-hero-meta i { margin-right: 5px }
.post-hero-sep { color: rgba(255,255,255,.25) }

/* ── Post body layout ── */
.post-body-wrap {
  display: grid;
  grid-template-columns: 64px 1fr 300px;
  gap: 0 56px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 56px 80px;
  align-items: start
}

/* ── Share bar (left) ── */
.post-share-bar {
  position: sticky;
  top: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 4px
}
.post-share-label {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--coal);
  writing-mode: vertical-rl;
  margin-bottom: 8px
}
.post-share-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--coal);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none
}
.post-share-btn:hover { border-color: var(--c); color: var(--c) }
.post-share-wa:hover { background: #25D366; border-color: #25D366; color: #fff }
.post-share-copy { font-family: inherit }

/* ── Article content ── */
.post-content { background: var(--white); padding: 52px 64px; min-height: 400px }
.post-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 400;
  letter-spacing: -.8px;
  color: var(--text);
  margin: 48px 0 16px;
  line-height: 1.18
}
.post-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  letter-spacing: -.4px;
  color: var(--text);
  margin: 36px 0 12px
}
.post-content h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c);
  margin: 32px 0 10px
}
.post-content p {
  font-size: 16px;
  font-weight: 300;
  color: var(--coal);
  line-height: 1.92;
  margin-bottom: 24px
}
.post-content strong { color: var(--text); font-weight: 600 }
.post-content em { font-style: italic }
.post-content a { color: var(--c); border-bottom: 1px solid var(--line); transition: border-color .2s }
.post-content a:hover { border-color: var(--c) }
.post-content ul,
.post-content ol { margin: 0 0 24px 24px; font-size: 16px; font-weight: 300; color: var(--coal); line-height: 1.9 }
.post-content li { margin-bottom: 6px }
.post-content blockquote {
  margin: 36px 0;
  padding: 28px 36px;
  border-left: 3px solid var(--c);
  background: var(--blush);
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  line-height: 1.6
}
.post-content blockquote cite {
  display: block;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c);
  font-style: normal;
  margin-top: 12px
}
.post-content img { max-width: 100%; height: auto; margin: 32px 0; display: block }
.post-content figure { margin: 32px 0 }
.post-content figcaption { font-size: 12px; color: var(--coal); text-align: center; font-style: italic; margin-top: 8px }
.post-content hr { border: none; border-top: 1px solid var(--line); margin: 44px 0 }
.post-content > *:first-child { margin-top: 0 }
.post-content p:first-of-type { font-size: 18px; line-height: 1.78; color: var(--text) }

/* ── Post tags ── */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line) }
.post-tag {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--coal);
  padding: 6px 14px;
  border: 1px solid var(--line);
  transition: all .2s
}
.post-tag:hover { border-color: var(--c); color: var(--c) }

/* ── Mobile share ── */
.post-share-mobile { margin-top: 32px; padding: 24px 0 0; border-top: 1px solid var(--line); display: none }
.post-share-mobile-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--coal); margin-bottom: 14px; display: block }
.post-share-mobile-btns { display: flex; gap: 10px }
.post-share-mobile .post-share-btn { width: auto; border-radius: 0; padding: 10px 20px; gap: 8px; font-size: 11px; letter-spacing: 1.5px }

/* ── Booking sidebar ── */
.post-booking-bar { position: sticky; top: 108px }
.post-booking-card { background: var(--white); padding: 32px 28px; border-top: 3px solid var(--c) }
.post-booking-eyebrow { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--c); margin-bottom: 10px }
.post-booking-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400; letter-spacing: -.6px; margin-bottom: 10px; line-height: 1.15 }
.post-booking-sub { font-size: 13px; font-weight: 300; color: var(--coal); line-height: 1.72; margin-bottom: 22px }
.post-booking-wa {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #25D366;
  font-weight: 500;
  margin-top: 14px;
  justify-content: center
}
.post-booking-wa:hover { color: #1da851 }
.post-back-blog {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--coal);
  margin-top: 20px;
  padding: 14px 0;
  transition: color .2s
}
.post-back-blog:hover { color: var(--c) }

/* ── Related posts ── */
.post-related { padding: 88px 0 100px; background: var(--cream) }
.post-related-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px }
.post-related-wrap .sh2 { margin-bottom: 48px }
.blog-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px }

/* ── Blog responsive ── */
@media (max-width: 1200px) {
  .post-body-wrap { grid-template-columns: 64px 1fr 260px; padding: 56px 40px }
  .post-content { padding: 44px 48px }
}
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr) }
  .blog-card--featured { grid-template-columns: 1fr }
  .blog-card--featured .blog-card-img-wrap { aspect-ratio: 16/7 }
  .blog-card--featured .blog-card-body { padding: 36px }
  .post-body-wrap { grid-template-columns: 1fr; padding: 48px 40px; gap: 0 }
  .post-share-bar { display: none }
  .post-share-mobile { display: block }
  .post-booking-bar { position: static; margin-top: 32px }
  .blog-grid--3 { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 768px) {
  .blog-sec { padding: 56px 0 80px }
  .blog-wrap { padding: 0 20px }
  .blog-filter-inner { padding: 0 20px }
  .blog-grid { grid-template-columns: 1fr; gap: 24px }
  .blog-card--featured { grid-column: auto }
  .post-hero { height: 56vh; min-height: 420px; margin-top: 66px }
  .post-hero-inner { padding: 0 20px 52px }
  .post-hero-title { font-size: clamp(28px, 7vw, 52px); letter-spacing: -1.5px }
  .post-body-wrap { padding: 36px 20px }
  .post-content { padding: 32px 24px }
  .post-related { padding: 60px 0 80px }
  .post-related-wrap { padding: 0 20px }
  .blog-grid--3 { grid-template-columns: 1fr }
  .blog-cta { padding: 72px 0 }
  .blog-cta-wrap { padding: 0 20px }
  .blog-cta-btns { flex-direction: column; align-items: center }
}
@media (max-width: 480px) {
  .blog-card-body { padding: 22px }
  .post-content p { font-size: 15px }
  .post-content p:first-of-type { font-size: 16px }
  .post-content { padding: 24px 18px }
}