/* 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. */

  /* ============ Tokens ============ */
  :root {
    --c-ink:        #14181A;  /* carbón — header oscuro, franja del restaurante, footer */
    --c-ink-2:      #232B2E;  /* superficie elevada sobre carbón */
    --c-text:       #1A1F22;  /* texto de lectura */
    --c-text-mute:  #5C666B;  /* texto secundario */
    /* Rojo de marca, tomado del logo y de la fachada real del hotel (@hotelavantyipiales).
       Son DOS rojos y no es un capricho: el rojo puro da 4,44:1 sobre blanco, apenas por
       debajo del mínimo legible de 4,5:1. Por eso el puro es solo decorativo y el oscuro
       es el único válido para texto y para fondo de botón. */
    --c-brand:      #ED1B34;  /* rojo puro — SOLO decorativo: barras, filetes, emblema. Nunca texto. */
    --c-accent:     #C1121F;  /* rojo legible — texto, números de sección, iconos, fondo de CTA (6,2:1) */
    --c-accent-dk:  #9E0E19;  /* hover del CTA */
    --c-accent-lt:  #FF8A94;  /* rojo claro — solo sobre fondo carbón (7,9:1) */
    --c-accent-bg:  #FDE9EB;  /* fondo de badge / chip */
    --c-surface:    #FFFFFF;  /* tarjetas y fondo base */
    --c-bg:         #F6F7F8;  /* gris neutro — secciones alternas */
    --c-line:       #E2E7E8;  /* bordes hairline */
    --c-line-2:     #C9D2D3;  /* borde con más presencia */
    --c-wa:         #25D366;  /* solo el botón flotante de WhatsApp */

    --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 72px; --s-7: 112px;
    --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

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

    --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  }

  /* ============ Base ============ */
  *, *::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-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2, h3 { font-family: var(--font-body); margin: 0; color: var(--c-ink); }
  h1 {
    font-weight: 800;
    font-size: clamp(2.3rem, 6.5vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
  }
  h2 {
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
  h3 { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.015em; }
  p { line-height: 1.65; font-size: 1.0625rem; margin: 0; color: var(--c-text); }
  p.body-max { max-width: 64ch; }
  p.lede {
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--c-text-mute);
    max-width: 64ch;
  }

  .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-surface);
    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-accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  /* ============ Eyebrow — rótulo numerado, elemento firma de Avanty ============ */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-text-mute);
    margin: 0 0 var(--s-2);
  }
  .eyebrow__n {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
  }
  .eyebrow__n::after {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    display: inline-block;
    margin-left: 12px;
  }
  /* Rótulo del hero: sin número, línea + texto en blanco/rojo claro sobre foto */
  .eyebrow--hero {
    color: #FFFFFF;
  }
  .eyebrow--hero::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--c-accent-lt);
    display: inline-block;
  }

  .section-head { margin-bottom: var(--s-5); }
  section { padding-block: var(--s-7); }

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

  /* ============ Botones ============ */
  .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: 1px solid transparent;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
    min-height: 44px;
    line-height: 1;
  }
  .btn-primary { background: var(--c-accent); color: #FFFFFF; }
  .btn-primary:hover { background: var(--c-accent-dk); }
  .btn-secondary {
    background: var(--c-surface);
    color: var(--c-text);
    border-color: var(--c-line-2);
  }
  .btn-secondary:hover { border-color: var(--c-ink); }
  .btn-white { background: #FFFFFF; color: var(--c-ink); }
  .btn-white:hover { background: var(--c-accent-bg); }
  .btn-outline-white {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255,255,255,.5);
  }
  .btn-outline-white:hover { border-color: #FFFFFF; }
  .btn-block { width: 100%; }

  /* ============ Header ============ */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 500;
    height: 68px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-line);
    transition: box-shadow 200ms ease;
  }
  .site-header.is-scrolled { box-shadow: 0 1px 2px rgba(20,24,26,.06); }
  .site-header__bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Logotipo tipográfico. Sigue la estructura del logo real: "avanty" en minúsculas y
     bien pesado, con "HOTEL" más pequeño y espaciado debajo. La barra roja de la
     izquierda recuerda las franjas verticales rojas de la fachada del edificio.
     TODO: cuando llegue el archivo del logo real (el monograma "A"), reemplazar todo
     este bloque por una <img> — ver README. */
  .logo {
    text-decoration: none;
    color: var(--c-ink);
    line-height: 1;
    display: block;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--c-brand);
  }
  .logo__main {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1.4rem;
    color: var(--c-ink);
    display: block;
  }
  .logo__sub {
    font-weight: 600;
    font-size: 0.58rem;
    letter-spacing: .26em;
    color: var(--c-text-mute);
    display: block;
    margin-top: 4px;
  }
  .nav-desktop { display: none; }
  .nav-desktop ul { list-style: none; display: flex; gap: var(--s-4); margin: 0; padding: 0; }
  .nav-desktop a {
    position: relative;
    text-decoration: none;
    color: var(--c-text);
    font-weight: 500;
    font-size: 0.95rem;
    /* 44px de alto mínimo para cumplir el tamaño táctil accesible */
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-desktop a::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -2px;
    height: 2px;
    background: var(--c-accent);
    transition: left 180ms ease, right 180ms ease;
  }
  .nav-desktop a:hover::after { left: 0; right: 0; }
  .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-ink);
    cursor: pointer;
  }
  @media (min-width: 900px) {
    .nav-desktop { display: block; }
    .header__cta { display: inline-flex; }
    .hamburger { display: none; }
  }

  /* Panel móvil */
  .nav-mobile {
    position: fixed;
    inset: 0;
    background: var(--c-surface);
    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-ink); 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 {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    text-decoration: none;
  }
  .nav-mobile a span { color: var(--c-accent); font-size: 1rem; font-weight: 800; }
  /* El color blanco debe ganarle a `.nav-mobile a`, que si no deja el texto en tinta
     sobre el rojo (2,9:1, ilegible). */
  .nav-mobile a.nav-mobile__cta { margin-top: var(--s-5); color: #FFFFFF; }
  body.nav-open { overflow: hidden; }

  /* ============ Hero ============ */
  .hero {
    position: relative;
    min-height: 88svh;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    background: var(--c-bg);
  }
  .hero__media { position: absolute; inset: 0; z-index: 0; }
  .hero__media img { width: 100%; height: 100%; object-fit: cover; background: var(--c-bg); }
  .hero__overlay {
    position: absolute;
    inset: 0;
    /* Dos capas: la vertical asienta la foto, y la horizontal oscurece el costado
       izquierdo, que es donde va el texto. Hace falta porque la foto de la fachada
       tiene el letrero iluminado justo detrás del titular. */
    background:
      linear-gradient(90deg, rgba(20,24,26,.72) 0%, rgba(20,24,26,.45) 45%, rgba(20,24,26,.10) 100%),
      linear-gradient(180deg, rgba(20,24,26,.55) 0%, rgba(20,24,26,.35) 40%, rgba(20,24,26,.70) 100%);
  }
  .hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: calc(var(--s-6) + 68px) var(--s-6);
    max-width: 44rem;
  }
  .hero p.lede { color: rgba(255,255,255,.86); margin-top: var(--s-3); }
  .hero h1 { color: #FFFFFF; margin-top: var(--s-2); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

  /* Tarjeta de datos superpuesta */
  .stat-bar {
    position: relative;
    z-index: 2;
    margin-top: -56px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-bar__cell {
    padding: var(--s-3);
    border-inline-end: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
  }
  .stat-bar__cell:nth-child(2n) { border-inline-end: none; }
  .stat-bar__cell:nth-last-child(-n+2) { border-bottom: none; }
  .stat-bar__value { display: block; font-weight: 800; font-size: 1.35rem; color: var(--c-ink); }
  .stat-bar__label { display: block; font-size: 0.82rem; color: var(--c-text-mute); margin-top: 2px; }
  @media (min-width: 700px) {
    .stat-bar { grid-template-columns: repeat(4, 1fr); }
    .stat-bar__cell { border-bottom: none; }
    .stat-bar__cell:nth-child(2n) { border-inline-end: 1px solid var(--c-line); }
    .stat-bar__cell:last-child { border-inline-end: none; }
  }

  /* ============ Servicios ============ */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-5);
  }
  .service-card {
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-3);
    background: var(--c-surface);
    transition: border-color 180ms ease;
  }
  .service-card:hover { border-color: var(--c-accent); }
  .service-card svg { color: var(--c-accent); width: 26px; height: 26px; }
  .service-card__label { display: block; font-weight: 600; margin-top: var(--s-2); color: var(--c-ink); }
  .service-card__detail { display: block; font-size: 0.95rem; color: var(--c-text-mute); margin-top: 2px; }

  /* ============ Habitaciones ============ */
  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-5);
  }
  .room-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .room-card__media { aspect-ratio: 4 / 3; background: var(--c-bg); }
  .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: 8px; font-size: 0.95rem; color: var(--c-text); }
  .room-card__features li::before { content: '—'; color: var(--c-accent); font-weight: 600; flex: none; }
  .room-card__price { color: var(--c-text-mute); font-size: 0.9rem; }
  .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; }

  /* ============ Restaurante — única franja oscura ============ */
  .restaurant { background: var(--c-ink); color: #FFFFFF; }
  .restaurant .eyebrow, .restaurant .eyebrow__n { color: var(--c-accent-lt); }
  .restaurant .eyebrow__n::after { background: var(--c-accent-lt); }
  .restaurant h2 { color: #FFFFFF; }
  .restaurant p.lede { color: rgba(255,255,255,.72); }
  .restaurant-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: center;
  }
  .restaurant__media { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--c-ink-2); }
  .restaurant__media img { width: 100%; height: 100%; object-fit: cover; }
  .restaurant__badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
  .restaurant__highlight {
    display: inline-block;
    padding: var(--s-2) var(--s-3);
    background: var(--c-ink-2);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-sm);
    font-weight: 600;
  }
  /* Para lo que NO va incluido en la tarifa (la cena): mismo tamaño, pero sin relleno
     y con menos peso visual, para que no compita con el badge del desayuno. */
  .restaurant__highlight--outline {
    background: transparent;
    border-color: rgba(255,255,255,.25);
    font-weight: 500;
    color: rgba(255,255,255,.8);
  }
  @media (min-width: 900px) {
    .restaurant-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ============ Galería ============ */
  /* Mosaico de 6 fotos. En escritorio son 3 columnas y la primera ocupa 2×2: eso da
     exactamente 9 celdas (4 de la grande + 5 pequeñas), así que cierra sin huecos.
     En móvil son 2 columnas parejas, sin foto grande, que también cierra justo con 6. */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: var(--s-5);
  }
  .gallery-item {
    border: 0;
    padding: 0;
    background: var(--c-bg);
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--r-sm);
    position: relative;
    aspect-ratio: 4 / 3;
  }
  .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 250ms ease; }
  .gallery-item:hover img { transform: scale(1.04); }
  @media (min-width: 700px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 230px; }
    .gallery-item { aspect-ratio: auto; }
    .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
  }

  dialog.lightbox {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 92vw;
    max-height: 92vh;
    width: min(900px, 92vw);
  }
  dialog.lightbox::backdrop { background: rgba(20,24,26,.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: #FFFFFF; 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(20,24,26,.7);
    color: #FFFFFF;
    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(20,24,26,.9); }

  /* ============ Opiniones ============ */
  .reviews-agg { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-5); }
  .reviews-agg__score { font-weight: 800; font-size: clamp(3.5rem, 9vw, 5.5rem); color: var(--c-accent); line-height: 1; }
  .reviews-agg__label { color: var(--c-text-mute); font-weight: 500; font-size: 1.05rem; }

  .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-surface);
    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 cite { font-style: normal; font-size: 0.9rem; color: var(--c-text-mute); }

  /* ============ Ubicación ============ */
  .location-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-5); }
  .location-grid iframe { width: 100%; min-height: 400px; border: 0; border-radius: var(--r-md); }
  .distance-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .distance-list li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding-block: var(--s-2);
    border-bottom: 1px solid var(--c-line);
  }
  .distance-list svg { color: var(--c-accent); width: 22px; height: 22px; flex: none; }
  .distance-list__name { font-weight: 600; color: var(--c-ink); flex: 1; }
  .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-accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .location-address a:hover { text-decoration: underline; }
  @media (min-width: 900px) {
    .location-grid { grid-template-columns: 1.1fr 0.9fr; }
  }

  /* ============ Reservas ============ */
  .booking-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-5); }
  .direct-booking {
    background: var(--c-ink);
    color: #FFFFFF;
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .direct-booking svg { color: var(--c-accent-lt); }
  .direct-booking p { color: rgba(255,255,255,.78); }

  .contact-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-4);
    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-accent); width: 22px; height: 22px; 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 { text-decoration: none; transition: color 180ms ease; word-break: break-word; }
  .contact-info__link:hover, .contact-info__link:focus-visible { color: var(--c-accent); text-decoration: underline; }
  .contact-card .btn { margin-top: var(--s-1); }
  @media (min-width: 900px) {
    .booking-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ============ Footer ============ */
  .site-footer { background: var(--c-ink); color: rgba(255,255,255,.68); padding-block: var(--s-6) var(--s-4); }
  .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
  .footer-logo .logo { color: #FFFFFF; }
  .footer-logo .logo__main { color: #FFFFFF; }
  .footer-logo .logo__sub { color: rgba(255,255,255,.55); }
  .footer-desc { margin-top: var(--s-2); color: rgba(255,255,255,.6); max-width: 40ch; }
  .footer-heading {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 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: rgba(255,255,255,.68); transition: color 180ms ease; }
  .footer-links a:hover { color: #FFFFFF; }
  .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 rgba(255,255,255,.3);
    border-radius: var(--r-pill);
    color: #FFFFFF;
    transition: background-color 180ms ease;
  }
  .footer-social a:hover { background: var(--c-ink-2); }
  .footer-rule { height: 1px; background: rgba(255,255,255,.12); 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: rgba(255,255,255,.6);
  }
  .footer-legal a { color: rgba(255,255,255,.6); text-decoration: underline; }
  @media (min-width: 900px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  }

  /* ============ Botón flotante de WhatsApp ============ */
  .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: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(20,24,26,.06), 0 6px 18px rgba(20,24,26,.22);
    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 (solo con JS) ============ */
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 380ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  @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-bg);
    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-accent); 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-accent); }

  /* 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-accent); 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-bg);
    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; }