:root {
  color-scheme: dark;
  --ink: #f7ecf2;
  --muted: #c9aeba;
  --dim: #987986;
  --line: rgba(246, 204, 222, 0.16);
  --bg: #100b13;
  --panel: #1a111b;
  --panel-2: #251421;
  --wine: #4b1027;
  --magenta: #b93670;
  --rose: #d2a27c;
  --lavender: #bda1dc;
  --radius: 22px;
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(185, 54, 112, 0.13), transparent 31rem),
    radial-gradient(circle at 86% 8%, rgba(189, 161, 220, 0.11), transparent 28rem),
    linear-gradient(180deg, #100b13 0%, #130d15 42%, #09070a 100%);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body.consent-locked {
  overflow: hidden;
}

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

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

.skip-link,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.skip-link:focus {
  z-index: 20;
  width: auto;
  height: auto;
  clip: auto;
  inset: 1rem auto auto 1rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgba(16, 11, 19, 0.82);
  backdrop-filter: blur(20px);
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2rem);
}

.brand {
  display: grid;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand span {
  font-size: 1rem;
  font-weight: 750;
}

.brand small {
  color: var(--rose);
  font-size: 0.68rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.6rem);
  color: var(--muted);
  font-size: 0.92rem;
}

.nav-links a {
  position: relative;
}

.nav-links a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  content: "";
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-cta,
.button {
  border: 1px solid rgba(210, 162, 124, 0.5);
  border-radius: 999px;
  color: var(--ink);
}

.nav-cta {
  padding: 0.55rem 0.9rem;
  background: rgba(210, 162, 124, 0.08);
}

.menu-toggle {
  display: none;
}

.consent-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(185, 54, 112, 0.2), transparent 26rem),
    rgba(7, 5, 8, 0.9);
  backdrop-filter: blur(18px);
}

.consent-gate[hidden] {
  display: none;
}

.consent-card {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  width: min(100%, 36rem);
  padding: clamp(1.4rem, 5vw, 2.3rem);
  border: 1px solid rgba(246, 204, 222, 0.18);
  border-radius: 1.6rem;
  background:
    linear-gradient(150deg, rgba(37, 20, 33, 0.98), rgba(16, 11, 19, 0.98)),
    var(--panel);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.48);
}

.consent-card h2 {
  max-width: 11ch;
  margin-bottom: 1rem;
}

.consent-card p,
.consent-card small {
  color: var(--muted);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.5rem 0 1rem;
}

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.8rem, 8vw, 7rem) clamp(1rem, 4vw, 2rem);
}

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) clamp(4rem, 8vw, 7rem);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  color: var(--dim);
  font-size: 0.88rem;
}

.breadcrumbs a {
  color: var(--muted);
}

.breadcrumbs span + span::before {
  content: "/";
  margin-right: 0.45rem;
  color: var(--dim);
}

.page-intro {
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.page-intro h1 {
  max-width: 12ch;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.editorial-card {
  min-height: 14rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.editorial-card p,
.page-intro p {
  color: var(--muted);
}

.editorial-card h2 { font-size: 1.75rem; overflow-wrap: anywhere; }
.page-intro h1 { font-size: 3rem; overflow-wrap: anywhere; }
.consent-card h2 { font-size: 2rem; }
.page { padding-bottom: 7rem; }
.breadcrumbs { color: var(--muted); }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  min-height: calc(100svh - 5rem);
}

.intro-copy {
  position: relative;
}

.intro-copy::before {
  position: absolute;
  top: -3rem;
  left: -1rem;
  width: min(44vw, 27rem);
  height: min(44vw, 27rem);
  border: 1px solid rgba(210, 162, 124, 0.18);
  border-radius: 42% 58% 61% 39%;
  content: "";
  pointer-events: none;
}

.eyebrow,
.section-kicker {
  margin: 0 0 1rem;
  color: var(--rose);
  font-size: 0.75rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-block;
  width: 0.32rem;
  height: 0.32rem;
  margin: 0 0.65rem;
  border-radius: 50%;
  background: var(--lavender);
  vertical-align: middle;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 13ch;
  margin-bottom: 1.35rem;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 9vw, 7.7rem);
  font-weight: 520;
  line-height: 0.94;
}

h2 {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  font-weight: 520;
  line-height: 1;
}

h3 {
  font-size: 1.22rem;
}

.intro p:not(.eyebrow),
.section-heading p,
.location-grid p,
.why-copy p,
.about-columns p {
  color: var(--muted);
  max-width: 42rem;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 1.15rem;
  transition: transform 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button.primary {
  background: linear-gradient(135deg, #7b1d45, #2b1327);
}

.button.ghost {
  background: rgba(255, 255, 255, 0.03);
}

.button.call {
  background: rgba(189, 161, 220, 0.08);
  border-color: rgba(189, 161, 220, 0.48);
}

.button.whatsapp {
  border-color: rgba(171, 213, 166, 0.42);
}

.age-panel {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  color: var(--muted);
}

.age-panel strong {
  color: var(--ink);
  font-size: 1.5rem;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(17rem, 0.55fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
}

.profile-mosaic {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.75fr;
  grid-auto-rows: minmax(15rem, auto);
  gap: 1rem;
}

.profile-card {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.profile-card.feature {
  grid-row: span 2;
  min-height: 44rem;
  border-radius: 2.2rem 2.2rem 0.8rem 2.2rem;
}

.profile-card.wide {
  grid-column: span 2;
  min-height: 18rem;
}

.profile-card.square {
  border-radius: 1rem 2.4rem 1rem 1rem;
}

.profile-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  transition: transform 500ms ease, opacity 200ms ease;
}

.profile-card:hover img {
  transform: scale(1.035);
  opacity: 1;
}

.profile-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.2rem;
  background: linear-gradient(0deg, rgba(6, 4, 7, 0.92), rgba(6, 4, 7, 0));
}

.status {
  color: var(--rose);
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-copy h3,
.profile-copy p {
  margin-bottom: 0.2rem;
}

.profile-copy p {
  color: var(--muted);
}

.profile-copy a {
  color: var(--lavender);
}

.locations,
.why {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.location-grid,
.about {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
}

.location-list {
  display: grid;
}

.location-list a {
  display: grid;
  grid-template-columns: minmax(7rem, 0.45fr) 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  line-height: 1;
}

.location-list span {
  align-self: center;
  color: var(--dim);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
}

.location-list a::after,
.category-tile span::after {
  content: " ->";
  color: var(--rose);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.category-tile {
  display: grid;
  align-content: space-between;
  min-height: 18rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(185, 54, 112, 0.08));
}

.category-tile i {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(210, 162, 124, 0.42);
  border-radius: 50% 50% 18% 50%;
  background: rgba(210, 162, 124, 0.08);
}

.category-tile p {
  color: var(--muted);
}

.category-tile span {
  color: var(--rose);
}

.why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.fact-strip {
  display: grid;
  gap: 0.75rem;
}

.fact-strip div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.fact-strip span,
.faq-list p {
  color: var(--muted);
}

.about-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.faq-list {
  display: grid;
  gap: 0.7rem;
}

details {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.025);
}

summary {
  cursor: pointer;
  padding: 1rem 1.15rem;
  font-weight: 720;
}

details p {
  padding: 0 1.15rem 1.15rem;
}

.final-cta {
  text-align: center;
}

.final-cta h2 {
  max-width: 13ch;
  margin-right: auto;
  margin-left: auto;
}

.contact-note {
  max-width: 36rem;
  margin-right: auto;
  margin-left: auto;
  color: var(--muted);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.site-footer {
  display: grid;
  gap: 1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem) 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.site-footer strong,
.site-footer a {
  color: var(--ink);
}

.floating-contact {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.5rem);
  bottom: clamp(0.9rem, 3vw, 1.5rem);
  z-index: 12;
  display: grid;
  gap: 0.7rem;
}

.float-button {
  display: inline-grid;
  width: 3.65rem;
  height: 3.65rem;
  place-items: center;
  border: 1px solid rgba(246, 204, 222, 0.22);
  border-radius: 50%;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.38);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: transform 180ms ease, border-color 180ms ease;
}

.float-button svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: currentColor;
}

.float-button:hover {
  transform: translateY(-3px);
  border-color: rgba(210, 162, 124, 0.62);
}

.float-whatsapp {
  background: linear-gradient(135deg, rgba(43, 122, 76, 0.92), rgba(24, 65, 45, 0.96));
}

.float-call {
  background: linear-gradient(135deg, rgba(123, 29, 69, 0.94), rgba(43, 19, 39, 0.96));
}

@media (max-width: 880px) {
  .menu-toggle {
    display: inline-grid;
    gap: 0.35rem;
    width: 2.65rem;
    height: 2.65rem;
    place-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
  }

  .menu-toggle span:not(.sr-only) {
    display: block;
    width: 1rem;
    height: 1px;
    background: currentColor;
  }

  .nav-links {
    visibility: hidden;
    position: absolute;
    top: 100%;
    right: 1rem;
    left: 1rem;
    display: grid;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 1rem;
    background: rgba(20, 12, 22, 0.98);
    transition: max-height 220ms ease, border-color 220ms ease;
  }

  .nav-links.is-open {
    visibility: visible;
    max-height: 25rem;
    border-color: var(--line);
  }

  .nav-links a {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
  }

  .intro,
  .section-heading,
  .editorial-grid,
  .location-grid,
  .why,
  .about,
  .about-columns {
    grid-template-columns: 1fr;
  }

  .intro {
    min-height: auto;
    padding-top: 4rem;
  }

  .profile-mosaic {
    grid-template-columns: 1fr 1fr;
  }

  .profile-card.feature,
  .profile-card.wide {
    grid-column: span 2;
    min-height: 32rem;
  }

  .category-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .profile-mosaic,
  .category-grid {
    grid-template-columns: 1fr;
  }

  .profile-card,
  .profile-card.feature,
  .profile-card.wide {
    grid-column: auto;
    min-height: 27rem;
  }

  .location-list a {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .action-row .button {
    justify-content: center;
    width: 100%;
  }

  .contact-actions .button {
    justify-content: center;
    width: 100%;
  }

  .floating-contact {
    right: 0.75rem;
    bottom: 0.75rem;
    grid-template-columns: 1fr 1fr;
  }

  .float-button {
    width: 3.25rem;
    height: 3.25rem;
  }

  .float-button svg {
    width: 1.3rem;
    height: 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Shared compatibility layer
   Keeps the newer page templates visually consistent with the original UI.
   -------------------------------------------------------------------------- */

body {
  min-width: 280px;
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

main.container {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

main.container > :where(section, article, .note, .safety-alert, .aggregate-rating) +
  :where(section, article, .note, .safety-alert, .aggregate-rating) {
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
}

.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.75rem;
  gap: 1.5rem;
}

.logo {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.nav > a,
.dropdown > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease;
}

.nav > a:hover,
.dropdown > a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
}

.nav .highlight {
  border: 1px solid rgba(210, 162, 124, 0.42);
  color: var(--ink);
  background: rgba(210, 162, 124, 0.08);
}

.dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 15;
  display: grid;
  min-width: 13rem;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.35rem);
  background: rgba(24, 15, 25, 0.98);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.35);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.dropdown-content a {
  padding: 0.7rem 0.8rem;
  border-radius: 0.7rem;
}

.dropdown-content a:hover {
  background: rgba(255, 255, 255, 0.055);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: min(44rem, calc(100svh - 8rem));
  padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(1.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(circle at 86% 18%, rgba(189, 161, 220, 0.18), transparent 19rem),
    radial-gradient(circle at 12% 90%, rgba(185, 54, 112, 0.2), transparent 25rem),
    linear-gradient(145deg, rgba(37, 20, 33, 0.9), rgba(14, 9, 15, 0.92));
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.24);
}

.hero::after {
  position: absolute;
  top: -9rem;
  right: -7rem;
  width: 29rem;
  height: 29rem;
  border: 1px solid rgba(210, 162, 124, 0.2);
  border-radius: 42% 58% 66% 34%;
  content: "";
  pointer-events: none;
  transform: rotate(18deg);
}

.hero h1,
main.container > h1,
.article-header h1 {
  font-size: clamp(2.8rem, 7vw, 6.8rem);
  overflow-wrap: anywhere;
}

main.container > h1 {
  max-width: 15ch;
}

.lead {
  max-width: 48rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.75;
}

.cta-buttons,
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.btn-primary,
.btn-secondary,
.btn-small,
.btn-contact,
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(210, 162, 124, 0.48);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 720;
  line-height: 1.2;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.btn-primary,
.btn-contact {
  background: linear-gradient(135deg, #7b1d45, #35152f);
  box-shadow: 0 0.8rem 2rem rgba(80, 17, 48, 0.25);
}

.btn-secondary,
.btn-small {
  background: rgba(255, 255, 255, 0.035);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-small:hover,
.btn-contact:hover,
.share-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(210, 162, 124, 0.8);
}

.features > h2,
.locations > h2,
.categories > h2,
.profiles-preview > h2,
.content-seo > h2,
.faq > h2,
main.container section > h2 {
  max-width: 16ch;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  font-size: clamp(2rem, 4.5vw, 4rem);
}

.feature-grid,
.offer-grid,
.profile-grid,
.contact-methods,
.booking-steps,
.reviews-section,
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.location-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.feature,
.offer-card,
.location-card,
.category-card,
.contact-card,
.hotel-card,
.review-card,
.booking-step,
.card {
  position: relative;
  padding: clamp(1.15rem, 3vw, 1.65rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(185, 54, 112, 0.045)),
    rgba(22, 14, 23, 0.76);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.12);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

:where(.feature, .offer-card, .location-card, .category-card, .contact-card, .hotel-card, .review-card, .card):hover {
  transform: translateY(-3px);
  border-color: rgba(210, 162, 124, 0.42);
  background-color: rgba(30, 18, 30, 0.92);
}

:where(.feature, .offer-card, .location-card, .category-card, .contact-card, .hotel-card, .review-card, .booking-step, .card) p,
.content-seo p,
.article-content p {
  color: var(--muted);
}

.profile-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-grid .profile-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 1.25rem;
}

.profile-grid .profile-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
}

.profile-grid .profile-card > :not(img) {
  margin-right: 1.15rem;
  margin-left: 1.15rem;
}

.profile-grid .profile-card h3 {
  margin-top: 1.15rem;
}

.profile-grid .profile-card .btn-small {
  align-self: flex-start;
  margin-top: auto;
}

.content-seo,
.what-to-include,
.factors,
.payment,
.tips,
.trust-signals,
.location-specific,
.remember,
.before-booking,
.meeting-safety,
.red-flags,
.emergency,
.rating-breakdown,
.submit-review,
.related-articles,
.cta,
.cta-final {
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

:where(.content-seo, .what-to-include, .factors, .payment, .tips, .trust-signals, .location-specific, .remember, .before-booking, .meeting-safety, .red-flags, .emergency, .article-content) :where(ul, ol) {
  padding-left: 1.25rem;
}

:where(.content-seo, .what-to-include, .factors, .payment, .tips, .trust-signals, .location-specific, .remember, .before-booking, .meeting-safety, .red-flags, .emergency, .article-content) li + li {
  margin-top: 0.65rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li + li::before {
  margin-right: 0.45rem;
  color: var(--dim);
  content: "/";
}

.breadcrumbs meta {
  display: none;
}

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  padding: 1rem;
  background: rgba(7, 5, 8, 0.92);
  backdrop-filter: blur(18px);
}

.age-gate.active,
.age-gate.is-open,
.age-gate[aria-hidden="false"] {
  display: grid;
}

.age-card {
  width: min(100%, 35rem);
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  background: linear-gradient(145deg, var(--panel-2), var(--panel));
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.5);
}

.age-card h2 {
  font-size: clamp(2rem, 6vw, 3.5rem);
}

.age-card p {
  color: var(--muted);
}

.age-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn-yes,
.btn-no {
  min-height: 2.9rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(210, 162, 124, 0.5);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.btn-yes {
  background: linear-gradient(135deg, #7b1d45, #35152f);
}

.areas-covered .area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.tag,
.trust-badge,
.availability-badge,
.response-time {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(210, 162, 124, 0.28);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(210, 162, 124, 0.07);
}

.hotel-card + .hotel-card,
.review-card + .review-card {
  margin-top: 1rem;
}

.hotel-name,
.contact-title,
.reviewer-name {
  color: var(--ink);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  font-weight: 700;
}

.hotel-location,
.review-location,
.review-date,
.contact-info {
  color: var(--muted);
}

.price-tag,
.price,
.rating,
.big-rating {
  color: var(--rose);
  font-weight: 800;
}

.hotel-features {
  padding-left: 1.2rem;
  color: var(--muted);
}

.note,
.safety-alert,
.highlight-box,
.tip-box,
.warning-box {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--rose);
  border-radius: 0.35rem var(--radius) var(--radius) 0.35rem;
  background: rgba(210, 162, 124, 0.06);
}

.warning-box,
.safety-alert {
  border-left-color: var(--magenta);
  background: rgba(185, 54, 112, 0.08);
}

.rate-section {
  overflow-x: auto;
}

.rate-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.rate-table :where(th, td) {
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.rate-table th {
  color: var(--ink);
  background: rgba(185, 54, 112, 0.12);
}

.rate-table td {
  color: var(--muted);
}

.rate-table tr > :last-child {
  border-right: 0;
}

.rate-table tbody tr:last-child td {
  border-bottom: 0;
}

.article-header {
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
}

.article-header h1 {
  max-width: 18ch;
  margin-inline: auto;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  color: var(--muted);
}

.article-content {
  max-width: 50rem;
  margin: 2.5rem auto 0;
}

.article-content h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.aggregate-rating {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  text-align: center;
}

.big-rating {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 1;
}

.review-header,
.rating-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bar {
  flex: 1;
  height: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.bar > div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--magenta), var(--rose));
}

.step-number {
  display: inline-grid;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: 0.5rem;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--wine);
}

.site-footer > .container {
  display: grid;
  gap: 1rem;
}

.floating-actions {
  position: fixed;
  right: clamp(0.8rem, 3vw, 1.5rem);
  bottom: clamp(0.8rem, 3vw, 1.5rem);
  z-index: 12;
  display: grid;
  gap: 0.65rem;
}

.btn-float {
  display: inline-grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid rgba(246, 204, 222, 0.22);
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(123, 29, 69, 0.95), rgba(43, 19, 39, 0.98));
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.38);
  font-size: 0.72rem;
  font-weight: 800;
  transition: transform 180ms ease;
}

.btn-float:hover {
  transform: translateY(-3px);
}

@media (max-width: 960px) {
  .site-header > .container {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 0.9rem;
  }

  .nav {
    justify-content: flex-start;
    width: 100%;
  }

  .feature-grid,
  .offer-grid,
  .contact-methods,
  .booking-steps,
  .reviews-section,
  .grid,
  .location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 1.25rem, var(--max));
  }

  main.container {
    padding-top: 2rem;
  }

  .site-header {
    position: relative;
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav > a,
  .dropdown > a {
    justify-content: center;
    text-align: center;
  }

  .dropdown-content {
    right: 0;
    left: 0;
  }

  .hero {
    min-height: auto;
    padding: 3.5rem 1.25rem;
  }

  .hero h1,
  main.container > h1,
  .article-header h1 {
    font-size: clamp(2.5rem, 15vw, 4.2rem);
  }

  .feature-grid,
  .offer-grid,
  .profile-grid,
  .contact-methods,
  .booking-steps,
  .reviews-section,
  .grid,
  .location-grid {
    grid-template-columns: 1fr;
  }

  .cta-buttons > *,
  .share-buttons > *,
  .age-buttons > * {
    width: 100%;
  }

  .review-header,
  .rating-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .rating-bar .bar {
    flex: none;
    width: 100%;
  }
}

/* Secondary templates and content-rich utility pages */
.about-intro,
.about-content,
.what-we-offer,
.our-process,
.areas-covered,
.commitment,
.contact-cta,
.how-to-book,
.faq-contact,
.luxury-hotels,
.business-hotels,
.budget-hotels,
.category-content,
.nearby-locations {
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
}

.about-intro,
.commitment,
.contact-cta,
.category-content,
.nearby-locations {
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.about-content,
.process-steps,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-card,
.process-steps > *,
.safety-tip,
.warning-list {
  padding: clamp(1.15rem, 3vw, 1.65rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(185, 54, 112, 0.045));
}

.blog-card {
  display: flex;
  flex-direction: column;
  min-height: 15rem;
}

.blog-card :where(h2, h3) {
  margin-bottom: 1rem;
  font-size: clamp(1.65rem, 3vw, 2.7rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.blog-card a:last-child {
  margin-top: auto;
  color: var(--rose);
  font-weight: 720;
}

.blog-date,
.location,
.description,
.review-text,
.disclaimer {
  color: var(--muted);
}

.contact-icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(185, 54, 112, 0.09);
  font-size: 1.5rem;
}

.checklist,
.warning-list ul {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
}

.checklist li + li,
.warning-list li + li {
  margin-top: 0.6rem;
}

.content {
  padding: 1.25rem;
}

.card > .content:first-child {
  padding-top: 0;
}

.fragment-page {
  min-height: calc(100svh - 2rem);
}

.fragment-page > h1 {
  max-width: 18ch;
  font-size: clamp(2.7rem, 7vw, 6rem);
  overflow-wrap: anywhere;
}

.fragment-page > p {
  max-width: 52rem;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.share-twitter,
.share-whatsapp,
.share-facebook {
  color: #fff;
}

.share-twitter { background: #176da5; }
.share-whatsapp { background: #196f43; }
.share-facebook { background: #334f91; }

/* Replace text-only floating controls with scalable brand/action icons. */
.floating-actions .btn-float {
  font-size: 0;
  line-height: 0;
}

.floating-actions .btn-float::before {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  content: "";
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

/* Persistent navigation and balanced section actions */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

:where(.locations, .profiles-preview, .categories, .features) >
  :where(.btn-primary, .btn-secondary) {
  width: fit-content;
  margin: 1.75rem auto 0;
}

:where(.cta, .cta-final, .contact-cta, .submit-review) {
  text-align: center;
}

:where(.cta, .cta-final, .contact-cta, .submit-review) >
  :where(.btn-primary, .btn-secondary, .btn-contact) {
  margin-top: 1rem;
}

main.container > section {
  scroll-margin-top: 7rem;
}

.floating-actions :is(.whatsapp, [href^="https://wa.me"], [href*="whatsapp"]) {
  background: linear-gradient(135deg, #268b55, #174a34);
}

.floating-actions :is(.whatsapp, [href^="https://wa.me"], [href*="whatsapp"])::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3a13 13 0 0 0-11.1 19.8L3 29l6.4-1.8A13 13 0 1 0 16 3Zm0 23.6c-2 0-3.9-.5-5.5-1.5l-.4-.2-3.8 1 1-3.7-.2-.4A10.6 10.6 0 1 1 16 26.6Zm5.8-7.9c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-1.8-.9-3-1.7-4.2-3.8-.3-.6.3-.5.9-1.7.1-.2 0-.4 0-.6l-1-2.3c-.3-.6-.6-.5-.9-.5h-.7c-.3 0-.7.1-1 .5-.4.4-1.4 1.4-1.4 3.4s1.5 4 1.7 4.2c.2.3 2.9 4.4 7 6.1 2.6 1.1 3.6 1.2 4.9 1 .8-.1 1.9-.8 2.2-1.5.3-.7.3-1.3.2-1.5-.1-.2-.3-.3-.6-.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3a13 13 0 0 0-11.1 19.8L3 29l6.4-1.8A13 13 0 1 0 16 3Zm0 23.6c-2 0-3.9-.5-5.5-1.5l-.4-.2-3.8 1 1-3.7-.2-.4A10.6 10.6 0 1 1 16 26.6Zm5.8-7.9c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-1.8-.9-3-1.7-4.2-3.8-.3-.6.3-.5.9-1.7.1-.2 0-.4 0-.6l-1-2.3c-.3-.6-.6-.5-.9-.5h-.7c-.3 0-.7.1-1 .5-.4.4-1.4 1.4-1.4 3.4s1.5 4 1.7 4.2c.2.3 2.9 4.4 7 6.1 2.6 1.1 3.6 1.2 4.9 1 .8-.1 1.9-.8 2.2-1.5.3-.7.3-1.3.2-1.5-.1-.2-.3-.3-.6-.4Z'/%3E%3C/svg%3E");
}

.floating-actions :is(.call, [href^="tel:"])::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.5 15.5 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.5 15.5 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E");
}

@media (max-width: 780px) {
  .about-content,
  .process-steps,
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .site-header {
    position: sticky;
  }

  .floating-actions .btn-float {
    width: 3.25rem;
    height: 3.25rem;
  }
}

/* Final shared layout: restrained proportions, fixed navigation, clear rhythm. */
:root { --header-height: 80px; --radius: 18px; }
html { scroll-padding-top: calc(var(--header-height) + 24px); }
body.has-fixed-header { padding-top: var(--header-height); }
body .site-header.navigation-ready {
  position: fixed; inset: 0 0 auto; z-index: 40;
  background: rgba(16, 11, 19, .96);
  box-shadow: 0 8px 32px #0002;
}
.site-header.navigation-ready > :is(.container, .nav-shell) {
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 24px; min-height: 80px;
  padding-block: 12px;
}
.navigation-ready .nav a[aria-current="page"] {
  color: var(--rose); background: #d2a27c12;
}
.navigation-ready .menu-toggle { display: none; flex-shrink: 0; }
main.container, main.page { min-width: 0; padding-top: clamp(32px, 5vw, 64px); }
main :is(section, article, .grid, .blog-grid) > * { min-width: 0; }
main h1 { letter-spacing: -.035em; line-height: 1.08; }
.hero h1 { font-size: clamp(2.6rem, 5.5vw, 5.6rem); max-width: 16ch; }
main.container > h1, .fragment-page > h1, .article-header h1 {
  font-size: clamp(2.3rem, 4.5vw, 4.5rem); max-width: 22ch;
}
.hero { min-height: auto; padding: clamp(40px, 7vw, 88px); }
main.container section > h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.15; max-width: 26ch; }
main :is(.card, .editorial-card, .category-card, .blog-card) h2 {
  font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.2;
}
.reviews-section { display: block; }
.profile-grid .profile-card { min-height: 0; }
.container .locations { padding-block: 32px; }
:is(.locations, .profiles-preview, .categories, .features) > :is(.btn-primary, .btn-secondary) {
  display: flex; width: fit-content; margin: 28px auto 0;
}
.site-footer {
  width: min(100% - 2rem, var(--max)); padding: 40px 0 112px;
  margin: 32px auto 0; line-height: 1.7;
}
.site-footer { text-align: center; justify-items: center; }
.site-footer > .container { width: 100%; justify-items: center; }
.site-footer nav { width: 100%; justify-content: center; gap: 12px 24px; }
.site-footer p { max-width: 76ch; margin: 0 auto; }
.site-footer .disclaimer { font-size: .85rem; }
/* Shared presentation takes precedence over older page-local styles. */
main.container :is(.hotel-card, .review-card, .contact-card) {
  padding: clamp(1.15rem, 3vw, 1.65rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(155deg, #ffffff0a, #b936700b), var(--panel);
}
main.container :is(.hotel-name, .reviewer-name, .contact-title) {
  color: var(--ink); font-size: 1.4rem;
}
main.container :is(.hotel-location, .review-location, .review-date, .contact-info) {
  color: var(--muted);
}
main.container :is(.price-tag, .price, .rating, .big-rating) { color: var(--rose); }
main.container .rate-table {
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
}
main.container .rate-table th { background: #b936701f; color: var(--ink); }
main.container :is(.note, .safety-alert, .safety-tip, .aggregate-rating, .warning-list) {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.15rem, 3vw, 1.65rem); background: #d2a27c0d;
}
main.container .safety-alert { border-left: 4px solid var(--magenta); }
main.container .safety-tip { border-left: 4px solid var(--lavender); }
main.container .warning-list li { color: var(--muted); }
main.container :is(.hotel-features, .checklist) li::before { color: var(--rose); }
main.container .step-number { background: var(--wine); }
main.container :is(.trust-badge, .response-time, .availability-badge) {
  border: 1px solid #d2a27c47; background: #d2a27c12;
  color: var(--ink); border-radius: 999px; animation: none;
}
main.container .contact-icon { font-size: 1.5rem; }
main.container .btn-contact {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.85rem; padding: .7rem 1.15rem;
  border: 1px solid #d2a27c7a; border-radius: 999px;
  background: linear-gradient(135deg, #7b1d45, #35152f);
}
main.container .btn-contact:hover { background: linear-gradient(135deg, #912a55, #451c3d); }
main.container .contact-card:hover { border-color: #d2a27c6b; transform: translateY(-3px); }
main.container .booking-step { padding: 4.5rem 1.5rem 1.5rem; margin: 0; }
main.container .booking-step::before { top: 1.25rem; left: 1.5rem; background: var(--wine); }
body :is(.floating-actions, .floating-contact) {
  position: fixed; right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; z-index: 45;
  padding: 8px; border: 1px solid var(--line); border-radius: 40px;
  background: #100b13e8; box-shadow: 0 12px 32px #0005;
}
body :is(.btn-float, .float-button) {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0; margin: 0;
  flex: 0 0 52px; line-height: 0; font-size: 0;
}
.floating-actions .btn-float::before {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 24px; height: 24px;
}
.float-button svg { display: block; width: 24px; height: 24px; flex: none; }
.age-gate[hidden] { display: none !important; }
/* Both page templates share the same content edges and introductory scale. */
main.page {
  width: min(100% - 2rem, var(--max));
  padding-inline: 0;
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}
main.page .page-intro { max-width: 60rem; }
main.page .page-intro h1 {
  max-width: 22ch; font-size: clamp(2.3rem, 4.5vw, 4.5rem);
  line-height: 1.08; letter-spacing: -.035em;
}
main.page .page-intro > p:not(.eyebrow) {
  max-width: 48rem; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.75;
}
@media (max-width: 640px) {
  main.page { width: min(100% - 1.25rem, var(--max)); }
}
@media (max-width: 640px) {
  .rate-section .rate-table { min-width: 0; table-layout: fixed; }
  .rate-section .rate-table :is(th, td) {
    padding: 12px 7px; font-size: .78rem; overflow-wrap: anywhere;
  }
}
.navigation-ready .dropdown-toggle {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .55rem .75rem; border: 0; border-radius: 12px;
  background: transparent; color: var(--muted); font: inherit; cursor: pointer;
}
.navigation-ready .dropdown-toggle:hover,
.navigation-ready .dropdown-toggle[aria-expanded="true"] { color: var(--ink); background: #ffffff09; }
.navigation-ready .dropdown .dropdown-content { display: none; }
.navigation-ready .dropdown.is-open .dropdown-content {
  display: grid; visibility: visible; opacity: 1; transform: none;
  max-height: calc(100dvh - var(--header-height) - 24px); overflow-y: auto;
}
@media (max-width: 1000px) {
  .site-header.navigation-ready > :is(.container, .nav-shell) { min-height: 68px; }
  .navigation-ready .menu-toggle {
    display: inline-grid; place-content: center; gap: 5px;
    width: 44px; height: 44px; border: 1px solid var(--line);
    border-radius: 12px; background: #ffffff06; color: var(--ink); cursor: pointer;
  }
  .navigation-ready .menu-toggle span:not(.sr-only) { width: 18px; height: 1px; background: currentColor; }
  .navigation-ready :is(.nav, .nav-links) {
    position: absolute; top: 100%; left: 12px; right: 12px; width: auto;
    display: none; grid-template-columns: 1fr; padding: 12px;
    max-height: calc(100dvh - 92px); overflow-y: auto;
    border: 1px solid var(--line); border-radius: 16px;
    background: #180f19; box-shadow: 0 20px 40px #0006;
  }
  .navigation-ready :is(.nav, .nav-links).is-open { display: grid; visibility: visible; }
  .navigation-ready :is(.nav, .nav-links) a { justify-content: flex-start; text-align: left; padding: 12px 16px; }
  .navigation-ready .dropdown-content { position: static; display: grid; visibility: visible; opacity: 1; transform: none; min-width: 0; box-shadow: none; margin: 4px 12px; }
}
@media (max-width: 640px) {
  .hero { padding: 36px 22px; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .container, .page { max-width: 100%; }
  .site-footer { padding-bottom: 108px; }
  body :is(.floating-actions, .floating-contact) { flex-direction: row; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); gap: 8px; padding: 6px; }
}

/* Complete directory listings */
.directory-profiles { margin-bottom: clamp(2rem, 5vw, 4rem); }
.directory-profiles .profile-card { scroll-margin-top: calc(var(--header-height) + 24px); }
.unpublished-article { color: var(--muted); }
.blog-card > .unpublished-article { margin-top: auto; opacity: .65; }

.directory-count { display: inline-block; vertical-align: middle; margin-left: .5rem; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 500 .85rem/1.3 system-ui, sans-serif; letter-spacing: normal; }
.location-directory-section { display: block; min-width: 0; }
.location-directory-section > .grid { width: 100%; min-width: 0; }
.location-directory-section .card { overflow-wrap: anywhere; }
#all-locations, #all-profiles { scroll-margin-top: calc(var(--header-height) + 24px); }
.location-directory .editorial-card { min-height: 9rem; }
.demo-profile .status { margin-top: .25rem; }

/* Separate, accessible profile contact actions. */
.profile-card:focus-within { outline: 2px solid var(--rose); outline-offset: 4px; }
.profile-card .profile-contact-actions {
  display: flex; justify-content: center; gap: 12px;
  margin-top: auto; padding-top: 16px;
}
.profile-contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 48px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink);
  transition: transform 180ms ease, border-color 180ms ease;
}
.profile-contact-icon svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.profile-contact-whatsapp { background: linear-gradient(135deg, #268b55, #174a34); }
.profile-contact-call { background: linear-gradient(135deg, #7b1d45, #35152f); }
.profile-contact-icon:hover { transform: translateY(-2px); border-color: var(--rose); }

/* Full navigation remains visible at every viewport size. */
.site-header.navigation-ready > :is(.container, .nav-shell) {
  flex-wrap: wrap; justify-content: center; gap: 12px 24px;
}
.site-header.navigation-ready .menu-toggle { display: none; }
.site-header.navigation-ready :is(.nav, .nav-links) {
  position: static; display: flex; visibility: visible; opacity: 1;
  flex-wrap: wrap; justify-content: center; align-items: center;
  width: auto; max-height: none; overflow: visible; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  gap: 2px 4px;
}
.site-header.navigation-ready :is(.nav, .nav-links) a {
  min-height: 40px; padding: 8px 10px; font-size: .82rem;
  justify-content: center; text-align: center; border-bottom: 0;
}
@media (max-width: 640px) {
  .site-header.navigation-ready > :is(.container, .nav-shell) { padding-block: 10px; gap: 8px; }
  .site-header.navigation-ready :is(.nav, .nav-links) { width: 100%; gap: 0; }
  .site-header.navigation-ready :is(.nav, .nav-links) a { padding: 8px; min-height: 40px; font-size: .78rem; }
}