/* Hoja de estilos del sitio. Vivía dentro de index.html; se sacó acá para que
   las páginas internas la compartan y el navegador la descargue una sola vez.
   Se sirve con must-revalidate (ver _headers): editarla se ve de inmediato. */

  :root {
    --c-ink:        #372F26;
    --c-ink-soft:   #4A4036;
    --c-text:       #2A2521;
    --c-text-mute:  #6B6157;
    --c-brass:      #B08D46;
    --c-brass-ink:  #8A6D2F;
    --c-brass-soft: #E8DCC4;
    --c-sand:       #EFE7DA;
    --c-ivory:      #FBF8F3;
    --c-white:      #FFFFFF;
    --c-line:       #E3D9C9;
    --c-wa:         #25D366;

    --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px;
    --r-sm: 6px; --r-md: 12px; --r-pill: 999px;

    --container-max: 1140px;
    --container-pad: clamp(20px, 5vw, 40px);

    --font-display: 'Calistoga', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--c-text);
    background: var(--c-ivory);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2 {
    font-family: var(--font-display);
    font-style: normal;
    color: var(--c-ink);
    margin: 0;
  }
  h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.08; }
  h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; }
  h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; margin: 0; color: var(--c-ink); }
  p { line-height: 1.65; font-size: 1.0625rem; margin: 0; }
  p.body-max { max-width: 62ch; }

  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .skip-link {
    position: absolute;
    left: var(--s-2);
    top: -100px;
    background: var(--c-ink);
    color: var(--c-ivory);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    z-index: 1000;
    transition: top 180ms ease;
    text-decoration: none;
    font-weight: 600;
  }
  .skip-link:focus {
    top: var(--s-2);
  }

  :focus-visible {
    outline: 2px solid var(--c-brass-ink);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  /* Eyebrow — elemento firma: filete de 48px + rombo de 5px centrado, vía ::after/::before */
  .eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-brass-ink);
    display: inline-block;
    margin: 0 0 var(--s-2);
    position: relative;
    padding-bottom: 13px;
  }
  .eyebrow::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 1px;
    background: var(--c-brass);
  }
  .eyebrow::before {
    content: '';
    position: absolute;
    left: 21.5px;
    bottom: -2px;
    width: 5px;
    height: 5px;
    background: var(--c-brass);
    transform: rotate(45deg);
  }
  .eyebrow--center { text-align: center; }
  .eyebrow--center::after { left: 50%; transform: translateX(-50%); }
  .eyebrow--center::before { left: 50%; transform: translateX(-50%) rotate(45deg); }
  .section-head {
    position: relative;
    margin-bottom: var(--s-5);
  }
  .section-head--center { text-align: center; }

  section { padding-block: var(--s-7); }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 28px;
    border-radius: var(--r-pill);
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
    min-height: 44px;
    line-height: 1;
  }
  .btn-primary {
    background: var(--c-ink);
    color: var(--c-ivory);
  }
  .btn-primary:hover { background: var(--c-ink-soft); }
  .btn-secondary {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-ink);
  }
  .btn-secondary:hover { background: var(--c-ink); color: var(--c-ivory); }
  .btn-ivory {
    background: var(--c-ivory);
    color: var(--c-ink);
  }
  .btn-ivory:hover { background: var(--c-white); }
  .btn-outline-ivory {
    background: transparent;
    color: var(--c-ivory);
    border-color: var(--c-ivory);
  }
  .btn-outline-ivory:hover { background: rgba(251,248,243,0.12); }
  .btn-brass {
    background: var(--c-brass);
    color: var(--c-ink);
  }
  .btn-brass:hover { background: var(--c-brass-ink); color: var(--c-ivory); }
  .btn-wa {
    background: var(--c-wa);
    color: var(--c-white);
  }
  .btn-wa:hover { filter: brightness(0.95); }
  .btn-block { width: 100%; }

  @media (prefers-reduced-motion: no-preference) {
    .anchor-target { scroll-margin-top: 84px; }
  }
  .anchor-target { scroll-margin-top: 84px; }

  /* ---------- Header ---------- */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 500;
    background: transparent;
    transition: background-color 200ms ease, box-shadow 200ms ease;
  }
  .site-header.is-scrolled {
    background: var(--c-ink);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  }
  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--s-2);
    min-height: 64px;
  }
  .logo {
    text-decoration: none;
    color: var(--c-ivory);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 11px;
  }
  .logo__mark {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: block;
  }
  /* Jost es la sans geometrica mas cercana al wordmark real del logo (tipo Futura) */
  .logo__main {
    font-family: 'Jost', var(--font-body);
    font-weight: 400;
    font-size: 1.32rem;
    letter-spacing: .11em;
    display: block;
  }
  .logo__sub {
    font-family: 'Jost', var(--font-body);
    font-weight: 400;
    font-size: 0.6rem;
    letter-spacing: .44em;
    display: block;
    margin-top: 4px;
    color: var(--c-brass-soft);
  }
  @media (max-width: 480px) {
    .logo__mark { width: 38px; height: 38px; }
    .logo__main { font-size: 1.12rem; }
  }
  .nav-desktop {
    display: none;
  }
  .nav-desktop ul {
    list-style: none;
    display: flex;
    gap: var(--s-4);
    margin: 0;
    padding: 0;
  }
  .nav-desktop a {
    text-decoration: none;
    color: var(--c-ivory);
    font-weight: 500;
    font-size: 0.95rem;
    padding: var(--s-1) 2px;
    border-bottom: 1.5px solid transparent;
    transition: border-color 180ms ease, color 180ms ease;
  }
  .nav-desktop a:hover { border-color: var(--c-brass); }
  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
  }
  .header__cta {
    display: none;
  }
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--c-ivory);
    cursor: pointer;
  }

  @media (min-width: 900px) {
    .nav-desktop { display: block; }
    .header__cta { display: inline-flex; }
    .hamburger { display: none; }
  }

  /* Mobile nav panel */
  .nav-mobile {
    position: fixed;
    inset: 0;
    background: var(--c-ink);
    z-index: 600;
    display: flex;
    flex-direction: column;
    padding: var(--s-3);
    transform: translateX(100%);
    transition: transform 220ms ease;
  }
  .nav-mobile[data-open="true"] { transform: translateX(0); }
  .nav-mobile__top {
    display: flex;
    justify-content: flex-end;
  }
  .nav-mobile__close {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--c-ivory);
    cursor: pointer;
  }
  .nav-mobile ul {
    list-style: none;
    margin: var(--s-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .nav-mobile a {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--c-ivory);
    text-decoration: none;
  }
  .nav-mobile__cta { margin-top: var(--s-5); }
  body.nav-open { overflow: hidden; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    min-height: 92svh;
    display: flex;
    align-items: flex-end;
    color: var(--c-ivory);
    background: var(--c-sand);
  }
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Prioriza la parte baja de la foto (letrero, logo, entrada) sobre el centro
       (balcones), que es lo que queda visible en pantallas altas como celulares. */
    object-position: center 82%;
    background: var(--c-sand);
  }
  /* Degradado anclado abajo, donde vive el texto (.hero usa align-items: flex-end):
     transparente arriba para que la foto se vea completa, oscuro solo en el tercio
     inferior para garantizar contraste sin tapar la imagen con una caja. */
  .hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(20,16,12,0) 0%,
      rgba(20,16,12,0) 30%,
      rgba(20,16,12,.45) 55%,
      rgba(20,16,12,.80) 78%,
      rgba(20,16,12,.94) 100%);
  }
  .hero__content {
    position: relative;
    z-index: 1;
    padding-block: var(--s-6) var(--s-6);
    width: 100%;
  }
  .hero__eyebrow {
    color: var(--c-brass-soft);
    text-shadow: 0 1px 6px rgba(0,0,0,.65);
  }
  /* Todo el texto del hero va sobre foto, sin caja de fondo: se apoya en el
     degradado de .hero__overlay (fuerte solo abajo) + sombra propia en cada
     elemento, para que la imagen se vea completa y el texto igual se lea. */
  .hero__content h1 {
    color: var(--c-ivory);
    text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
  }
  .hero__panel {
    display: block;
    max-width: 640px;
  }
  .hero p.hero__lede {
    color: var(--c-ivory);
    max-width: 52ch;
    margin-top: var(--s-2);
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
  }
  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-5);
    font-weight: 500;
    font-size: 0.95rem;
    text-shadow: 0 1px 6px rgba(0,0,0,.65);
  }
  .trust-sep {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--c-brass);
    transform: rotate(45deg);
    flex: none;
  }

  /* ---------- Servicios grid ---------- */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-5);
  }
  .service-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
  }
  .service-item svg {
    color: var(--c-brass);
    width: 28px;
    height: 28px;
  }
  .service-item__label {
    font-weight: 500;
    color: var(--c-ink);
  }
  .service-item__detail {
    color: var(--c-text-mute);
    font-size: 0.95rem;
  }

  /* ---------- Rooms ---------- */
  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-5);
  }
  .room-card {
    background: var(--c-white);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--c-line);
    display: flex;
    flex-direction: column;
  }
  .room-card__media {
    aspect-ratio: 4 / 3;
    background: var(--c-sand);
  }
  .room-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .room-card__body {
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
  }
  .room-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .room-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--c-text);
  }
  .room-card__features li::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-top: 7px;
    background: var(--c-brass);
    transform: rotate(45deg);
    flex: none;
  }
  .room-card__rate {
    color: var(--c-text-mute);
    font-size: 0.9rem;
    font-style: italic;
  }
  .room-card__price {
    margin-top: var(--s-1);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.2;
  }
  .room-card__price span {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--c-text-mute);
    letter-spacing: .02em;
  }
  .room-card__body .btn { margin-top: auto; }
  .rooms-note {
    text-align: center;
    margin-top: var(--s-5);
    color: var(--c-text-mute);
    font-weight: 500;
  }

  /* ---------- Restaurant ---------- */
  .zoar {
    background: var(--c-ink);
    color: var(--c-ivory);
  }
  .zoar .eyebrow { color: var(--c-brass-soft); }
  .zoar h2 { color: var(--c-ivory); }
  .zoar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: center;
  }
  .zoar__media {
    aspect-ratio: 4 / 3;
    background: var(--c-sand);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .zoar__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .zoar p { color: var(--c-brass-soft); }
  .zoar__highlight {
    margin-top: var(--s-4);
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-brass);
    font-weight: 600;
    color: var(--c-ivory);
    display: table;
  }
  /* Cuando hay más de un horario, el segundo va pegado al primero, sin repetir el filete grande */
  .zoar__highlight + .zoar__highlight {
    margin-top: var(--s-2);
    padding-top: 0;
    border-top: none;
  }
  @media (min-width: 900px) {
    .zoar-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ---------- Gallery ---------- */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: var(--s-2);
    margin-top: var(--s-5);
  }
  .gallery-item {
    border: 0;
    padding: 0;
    background: var(--c-sand);
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--r-sm);
    position: relative;
  }
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 250ms ease;
  }
  .gallery-item:hover img { transform: scale(1.04); }
  .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  @media (min-width: 700px) {
    .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; }
  }

  dialog.lightbox {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 92vw;
    max-height: 92vh;
    width: min(900px, 92vw);
  }
  dialog.lightbox::backdrop {
    background: rgba(42, 37, 33, 0.92);
  }
  .lightbox__inner {
    position: relative;
    background: var(--c-ink);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .lightbox__inner img {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    background: var(--c-ink);
  }
  .lightbox__caption {
    color: var(--c-ivory);
    padding: var(--s-2) var(--s-3);
    font-size: 0.9rem;
  }
  .lightbox__close,
  .lightbox__prev,
  .lightbox__next {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    background: rgba(55,47,38,0.7);
    color: var(--c-ivory);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .lightbox__close { top: var(--s-2); right: var(--s-2); }
  .lightbox__prev { left: var(--s-2); top: 50%; transform: translateY(-50%); }
  .lightbox__next { right: var(--s-2); top: 50%; transform: translateY(-50%); }
  .lightbox__prev:hover, .lightbox__next:hover, .lightbox__close:hover { background: rgba(55,47,38,0.9); }

  /* ---------- Reviews ---------- */
  .reviews-agg {
    text-align: center;
    margin-top: var(--s-5);
  }
  .reviews-agg__score {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 4rem);
    color: var(--c-ink);
    display: block;
  }
  .reviews-agg__count {
    color: var(--c-text-mute);
    font-weight: 500;
  }
  .reviews-themes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-4);
    margin-top: var(--s-4);
  }
  .reviews-themes li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-weight: 500;
    color: var(--c-ink);
  }
  .reviews-themes svg { color: var(--c-brass); width: 20px; height: 20px; }

  .quotes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-5);
  }
  .quote-card {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .quote-card p {
    font-style: italic;
    color: var(--c-text);
  }
  .quote-card cite {
    font-style: normal;
    font-size: 0.9rem;
    color: var(--c-text-mute);
  }

  /* ---------- Location ---------- */
  .location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin-top: var(--s-5);
  }
  .location-grid iframe {
    width: 100%;
    min-height: 380px;
    border: 0;
    border-radius: var(--r-md);
  }
  .distance-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .distance-list li {
    display: flex;
    gap: var(--s-2);
    align-items: flex-start;
  }
  .distance-list svg {
    color: var(--c-brass);
    width: 24px;
    height: 24px;
    flex: none;
    margin-top: 2px;
  }
  .distance-list__name {
    font-weight: 600;
    color: var(--c-ink);
    display: block;
  }
  .distance-list__value {
    color: var(--c-text-mute);
    font-size: 0.95rem;
  }
  .location-address {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-line);
  }
  .location-address p { margin-bottom: var(--s-2); }
  .location-address a {
    text-decoration: none;
    font-weight: 600;
    color: var(--c-brass-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  @media (min-width: 900px) {
    .location-grid { grid-template-columns: 1.1fr 0.9fr; }
  }

  /* ---------- Contact ---------- */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin-top: var(--s-5);
  }
  .direct-booking {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    background: var(--c-white);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-4);
  }
  .direct-booking svg { color: var(--c-brass-ink); }

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .contact-info__item {
    display: flex;
    gap: var(--s-2);
    align-items: flex-start;
  }
  .contact-info__item svg {
    color: var(--c-brass);
    width: 24px;
    height: 24px;
    flex: none;
    margin-top: 2px;
  }
  .contact-info__label {
    font-weight: 600;
    color: var(--c-ink);
    display: block;
  }
  .contact-info__value { color: var(--c-text-mute); }
  .contact-info__link {
    display: inline-block;
    text-decoration: none;
    transition: color 180ms ease;
    word-break: break-word;
  }
  .contact-info__link:hover,
  .contact-info__link:focus-visible { color: var(--c-brass-ink); text-decoration: underline; }
  .contact-info__value--secondary {
    display: block;
    margin-top: 2px;
    font-size: 0.92rem;
    color: var(--c-text-mute);
  }
  .contact-info__hint {
    font-size: 0.82rem;
    color: var(--c-text-mute);
    text-decoration: none;
  }
  .contact-info .btn-wa { margin-top: var(--s-2); }

  @media (min-width: 900px) {
    .contact-grid { grid-template-columns: 1.2fr 0.8fr; }
  }

  /* ---------- Footer ---------- */
  .site-footer {
    background: var(--c-ink);
    color: var(--c-brass-soft);
    padding-block: var(--s-6) var(--s-4);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .footer-logo .logo__main { color: var(--c-ivory); }
  .footer-desc {
    margin-top: var(--s-2);
    color: var(--c-brass-soft);
    max-width: 40ch;
  }
  .footer-heading {
    color: var(--c-ivory);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: var(--s-2);
  }
  .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
  }
  .footer-links a {
    text-decoration: none;
    color: var(--c-brass-soft);
    transition: color 180ms ease;
  }
  .footer-links a:hover { color: var(--c-ivory); }
  .footer-social {
    display: flex;
    gap: var(--s-2);
  }
  .footer-social a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-brass);
    border-radius: var(--r-pill);
    color: var(--c-ivory);
    transition: background-color 180ms ease;
  }
  .footer-social a:hover { background: var(--c-ink-soft); }
  .footer-rule {
    height: 1px;
    background: var(--c-brass);
    opacity: 0.4;
    margin-block: var(--s-5) var(--s-3);
  }
  .footer-legal {
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-2);
    align-items: center;
    color: var(--c-brass-soft);
  }
  .footer-legal a {
    color: var(--c-brass-soft);
    text-decoration: underline;
  }
  @media (min-width: 900px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  }

  /* ---------- WhatsApp floating button ---------- */
  .wa-float {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: var(--r-pill);
    background: var(--c-wa);
    color: var(--c-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
    text-decoration: none;
  }
  .wa-float[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- Scroll reveal (JS-only) ---------- */
  .js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .js .reveal { opacity: 1; transform: none; }
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }


/* ==========================================================================
   Páginas internas — se agregó el 2026-09-11, cuando el sitio dejó de ser una
   sola página (cerca-de-las-lajas, paso-rumichaca, preguntas-frecuentes).
   Reutiliza los mismos tokens de color, espaciado y radios de arriba.
   ========================================================================== */
  .page-head {
    padding: calc(var(--s-7) + 20px) 0 var(--s-5);
    background: var(--c-sand);
    border-block-end: 1px solid var(--c-line);
  }
  .breadcrumb { font-size: .875rem; color: var(--c-text-mute); margin-block-end: var(--s-2); }
  .breadcrumb a { color: var(--c-brass-ink); text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .page-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); max-width: 22ch; }
  .page-head .lede {
    margin-block-start: var(--s-3);
    max-width: 62ch;
    color: var(--c-text-mute);
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  .page-body { padding: var(--s-6) 0 var(--s-7); }
  .prose { max-width: 68ch; }
  .prose h2 { margin-block: var(--s-6) var(--s-2); font-size: clamp(1.45rem, 3vw, 2rem); }
  .prose > h2:first-child { margin-block-start: 0; }
  .prose h3 { margin-block: var(--s-4) var(--s-1); }
  .prose p { margin-block-end: var(--s-2); }
  .prose a { color: var(--c-brass-ink); }

  /* Lista de datos duros: concepto a la izquierda, valor a la derecha. */
  .facts { list-style: none; padding: 0; margin-block: var(--s-3) var(--s-4); border-block-start: 1px solid var(--c-line); }
  .facts li {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
    padding-block: var(--s-2);
    border-block-end: 1px solid var(--c-line);
  }
  .facts b { font-weight: 600; }
  .facts span { color: var(--c-text-mute); text-align: end; }

  .faq-item { border-block-end: 1px solid var(--c-line); }
  .faq-item summary {
    cursor: pointer;
    padding-block: var(--s-2);
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-2);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; color: var(--c-brass-ink); font-size: 1.5rem; font-weight: 400; line-height: 1; }
  .faq-item[open] summary::after { content: "–"; }
  .faq-item p { margin-block-end: var(--s-2); color: var(--c-text-mute); }

  .page-cta {
    margin-block-start: var(--s-6);
    padding: var(--s-4);
    background: var(--c-ivory);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    max-width: 68ch;
  }
  .page-cta h2 { margin-block-start: 0; }
  .page-cta p { margin-block-end: var(--s-3); max-width: 52ch; }

  /* El header de este sitio es transparente hasta que se hace scroll, porque está
     diseñado encima de la foto oscura del hero. Las páginas internas no tienen esa
     foto, así que acá arranca sólido desde el principio o el menú no se vería. */
  body.page-inner .site-header { background: var(--c-ink); box-shadow: 0 2px 12px rgba(0,0,0,0.18); }