/* TR33 · Amador (equivalente de la página «location» de 619). Solo ajustes de esta página. */

/* H1: la segunda frase no se parte (619: h1 span nowrap) */
.page-amador .hero__text h1 .nowrap { white-space: nowrap; }

/* Hero (amador-03): mientras no haya otra toma dorada, más cielo y perfil de la ciudad, y un velo más ligero que el
   de la base para que el Cerro Ancón no quede como una masa negra. Solo >= 768: bajo 768 el texto va en la banda piedra */
@media (min-width: 768px) {
  .page-amador .hero .hero__veil { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.75) 100%); }
}

/* Toma turquesa (vuelo sobre la Calzada, rg-calzada-01): se templa para convivir con los renders cálidos */
.page-amador .tone-turquesa img, .page-amador .tone-turquesa video { filter: saturate(.68) sepia(.1); }

/* ---------- 2. Mapa: imagen plana 16:10 + capa HTML con marcador y rótulos ---------- */
.amador-map { position: relative; display: block; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #B0B6AC; line-height: 0; }
.amador-map > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0%; }
/* la capa conserva la proporción real de la imagen (2400 × 1610), anclada arriba como la foto:
   así los porcentajes de mapa.json caen en su sitio a cualquier ancho */
.amador-map__layer { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 2400 / 1610; pointer-events: none; }
.amador-map__pois { list-style: none; margin: 0; padding: 0; }
.map-poi {
  position: absolute; width: 0; height: 0;
  font-family: var(--font-caption); font-size-adjust: var(--fsa-caption);
  font-size: clamp(8px, .85vw, 16px); font-weight: 400; line-height: 1.2;
  letter-spacing: calc(.02em + var(--ls-fix-caption)); text-transform: uppercase; color: var(--c-ink);
}
.map-poi::before { content: ""; position: absolute; left: 0; top: 0; width: max(4px, .36vw); height: max(4px, .36vw); border-radius: 50%; background: var(--c-ink); transform: translate(-50%, -50%); }
.map-poi > span { position: absolute; top: 0; white-space: nowrap; transform: translateY(-50%); }
/* el número del punto solo se ve bajo 768 (con la leyenda .map-key debajo del mapa) */
.map-poi__n { display: none; font-weight: inherit; }
.map-poi--r > span { left: max(7px, .7vw); }
.map-poi--l > span { right: max(7px, .7vw); }
/* destinos que quedan más allá del borde superior: flecha fina hacia arriba en lugar de punto */
.map-poi--edge::before { width: max(5px, .5vw); height: max(5px, .5vw); border-radius: 0; background: none; border-left: 1px solid var(--c-ink); border-top: 1px solid var(--c-ink); transform: translate(-50%, -20%) rotate(45deg); }
.map-poi--edge::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: max(12px, 1.5vw); margin-left: -.5px; background: var(--c-ink); }
.map-poi--edge > span { top: max(7px, .8vw); }
/* marcador del proyecto: único elemento oscuro y pesado del mapa */
.map-marker { position: absolute; width: max(34px, 4.9vw); height: max(34px, 4.9vw); border-radius: 50%; background: var(--c-ink); transform: translate(-50%, -50%); }
.map-marker__logo { position: absolute; inset: 22% 14%; background: var(--c-paper); -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat; }
/* entre 768 y 879 px este rótulo (a la izquierda de su punto, con letra de 8 px fija) no cabe antes del borde del mapa */
@media (max-width: 879px) { .map-poi--roomy { display: none; } }
/* leyenda numerada: solo en el teléfono */
.map-key { display: none; }

/* < 768 (amador-02): el mapa se recorta en cuadrado (una vez y media más grande que el 16:10 de 619), cada punto
   muestra solo su número y los nombres van en la leyenda de dos columnas, en el mismo tono del agua del mapa.
   La capa sigue a la imagen: misma altura, mismo ancho proporcional y el mismo desplazamiento que object-position
   (left: P% + translateX(-P%) = P% × (ancho del marco − ancho de la imagen)). */
@media (max-width: 767px) {
  .amador-map { aspect-ratio: 1 / 1; }
  .amador-map > img { object-position: 8% 0%; }
  .amador-map__layer { width: auto; height: 100%; left: 8%; transform: translateX(-8%); }
  .map-poi { display: block; font-size: 11px; letter-spacing: .04em; }
  .map-poi--roomy { display: block; }
  .map-poi::before { width: 5px; height: 5px; }
  .map-poi--edge::before { width: 6px; height: 6px; }
  .map-poi--edge::after { height: 14px; }
  .map-poi--edge > span { top: 9px; }
  .map-poi--r > span { left: 6px; }
  .map-poi--l > span { right: 6px; }
  .map-poi__n { display: inline; }
  .map-poi__t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .map-marker { width: 44px; height: 44px; }

  .map-key {
    display: block; margin: 0; list-style: none; counter-reset: key;
    columns: 2; column-gap: 18px;
    padding: 6px max(20px, env(safe-area-inset-right)) 30px max(20px, env(safe-area-inset-left));
    background: #B0B6AC; color: var(--c-ink);
    font-family: var(--font-sans); font-size-adjust: var(--fsa-sans); font-size: 14px; font-weight: 400; line-height: 1.35;
  }
  .map-key li { position: relative; margin: 0 0 9px; padding-left: 22px; counter-increment: key; break-inside: avoid; }
  .map-key li::before {
    content: counter(key); position: absolute; left: 0; top: 0;
    font-family: var(--font-caption); font-size-adjust: var(--fsa-caption); font-size: 11px; line-height: 18.9px; letter-spacing: .04em;
  }
}

/* ---------- 3 y 12. Intros centradas ---------- */
.page-amador .row--intro h2 { letter-spacing: var(--ls-fix-upper); margin-bottom: 10px; }
.page-amador .row--intro h2.h2--tracked { letter-spacing: calc(.96px + var(--ls-fix-upper)); }
/* < 768 el H2 en mayúsculas mide 28 px: sin el ajuste de ancho de las mayúsculas grandes, que lo apretaba */
@media (max-width: 767px) {
  .page-amador .row--intro h2, .page-amador .row--intro h2.h2--tracked { letter-spacing: -.015em; word-spacing: .04em; }
}
@media (max-width: 600px) {
  .page-amador .row--intro h2 { margin-bottom: 0; }
  .page-amador .row--intro-last { --row-pb: 20px; }
}

/* ---------- 4–6. Filas de foto: en móvil sin padding vertical (regla de nodo de 619) ---------- */
@media (max-width: 600px) {
  .page-amador .row--photo { --row-pt: 0px; --row-pb: 0px; }
  .page-amador .row--photo.row--photo-last { --row-pb: 80px; }
  .page-amador .row--photo .row__inner > .photo { margin-bottom: 0; }
  .page-amador .row--photo .cols--pair > .col > .photo { margin-bottom: 0; }
}

/* ---------- 8. Dos columnas con la lista de destinos ---------- */
.page-amador .row--nearby .col > h2 { margin: 12px 20px 8px; }
.page-amador .places { margin: 12px 20px 20px; }
.places h3, .places li { font-size: 21px; line-height: 1.5; font-weight: var(--fw-text); }
.places h3 { margin: 0 0 1.25rem; color: var(--c-accent-text); text-transform: uppercase; letter-spacing: var(--ls-caps); word-spacing: normal; }
.places ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.places ul:last-child { margin-bottom: 0; }
.places li { margin: 0; color: var(--c-ink); letter-spacing: var(--ls-fix-text); }
.places .n { text-transform: uppercase; letter-spacing: var(--ls-caps); word-spacing: normal; }
/* calificativo «· Isla Naos»: un paso por detrás del nombre */
.places .q { color: var(--c-muted); }
@media (max-width: 768px) {
  .places li { font-size: 1rem; }
  .places h3 { padding-top: 1.25rem; }
  .places h3:first-child { padding-top: 0; }
}
/* amador-08 (pedido del cliente): sin hueco blanco junto a la lista. Apilado, una columna tras otra; desde 992 el
   título y su frase acompañan la lista (sticky, bajo la cabecera fija). Las dos subcolumnas (Gastronomía + Hoteles |
   Turismo + Parques) se probaron y se descartaron: a 21 px en mayúsculas 17 de los 22 nombres se partían en dos
   líneas (regla del pedido: si se parten, solo el sticky). */


@media (min-width: 992px) {
  .page-amador .row--nearby .cols--text-text { align-items: flex-start; }
  .page-amador .row--nearby .cols--text-text > .col:first-child {
    position: -webkit-sticky; position: sticky; align-self: flex-start;
    top: calc(84px + 40px + env(safe-area-inset-top, 0px));
  }
}

/* ---------- 10. Komorebi: texto + imagen vertical ---------- */
.page-amador .row--komorebi h2 .ja { display: block; font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif; font-size-adjust: none; letter-spacing: .08em; }
.page-amador .row--komorebi em { font-style: italic; }
/* fila sin section-top/bottom: 130 px arriba y abajo (regla de nodo de 619); 60 / 40 en móvil */
.page-amador .row--komorebi { --row-pt: 130px; --row-pb: 130px; }
@media (max-width: 600px) {
  .page-amador .row--komorebi { --row-pt: 60px; --row-pb: 40px; }
  .page-amador .row--komorebi .col--media > .photo { margin: 60px 20px 40px; }
}

/* ---------- 13. Carrusel: 40 / 80 en móvil ---------- */
@media (max-width: 600px) {
  .page-amador .chapter > .row--carousel { --row-pt: 40px; --row-pb: 80px; }
}

/* 15-oct (Raúl: «nadie lee bloques largos»): el entorno en cuatro puntos con ícono; lo que hay cerca, en una fila de
   íconos; las categorías de «A pasos y a minutos» con su ícono */
.page-amador .row__inner > .am-entorno { margin-top: 40px; }
@media (min-width: 992px) { .page-amador .row--intro .row__inner:has(> .am-entorno) { max-width: 1100px; } }
.page-amador .am-cerca { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin: 28px auto 0; max-width: 900px; }
.page-amador .am-cerca > li { font-size: 1.0625rem; }
@media (max-width: 767.98px) { .page-amador .am-cerca { flex-direction: column; align-items: flex-start; max-width: 22rem; } }
.page-amador h3.icon-inline { display: flex; gap: 12px; }
.page-amador h3.icon-inline > .icon { width: 24px; height: 24px; color: var(--icon-color, var(--c-accent)); }

/* 15-oct: el texto de Komorebi quedó corto junto a una foto alta: va centrado en vertical */
@media (min-width: 768px) { .page-amador .row--komorebi .cols { align-items: center; } }

/* 15-oct (revisión): la lista de «A pasos y a minutos» deja sitio al botón flotante */
@media (min-width: 768px) { .page-amador .row--nearby .cols--text-text > .col:last-child { padding-right: 96px; } }