/* Posada Tordillo · La posada
   El plano dibujado con el trazo del logo (puntos que abren la foto de cada rincón) y la galería grande
   con filtros. */

/* ---------- El plano ---------- */
.plano { background: var(--cal) var(--grano); }
.plano__cabecera { display: grid; gap: 18px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.plano__cabecera .cabecera { margin: 0; }
.plano__nota { font-size: .875rem; color: var(--tinta-3); max-width: 40ch; }
@media (min-width: 900px) { .plano__cabecera { grid-template-columns: 1fr auto; } }
.plano__hoja { position: relative; padding: clamp(10px, 2vw, 28px); background: #fffdf8; box-shadow: 0 1px 2px rgba(59, 56, 37, .1), 0 30px 60px -36px rgba(59, 56, 37, .45); }
.plano__dibujo { display: block; width: 100%; height: auto; overflow: visible; }
.plano__dibujo path, .plano__dibujo circle { fill: none; stroke: var(--tinta-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-calle { stroke: var(--piedra) !important; stroke-width: 26 !important; stroke-linecap: butt !important; opacity: .5; }
.pl-nombre-calle { font: 500 15px var(--sans); letter-spacing: .2em; text-transform: uppercase; fill: var(--tinta-3); }
.pl-cerco { stroke-dasharray: .006 .01; stroke: var(--hoja-osc) !important; }
.pl-casa { fill: rgba(254, 251, 246, .9) !important; stroke-width: 2.4 !important; stroke: var(--tinta) !important; }
.pl-techo { stroke: var(--techo) !important; stroke-width: 1.4 !important; opacity: .8; }
.pl-galeria, .pl-poste { stroke: var(--tinta-3) !important; stroke-width: 1.6 !important; }
.pl-puerta { stroke: var(--hoja-osc) !important; stroke-width: 5 !important; }
.pl-hamaca { stroke: var(--techo) !important; }
.pl-escalera { stroke: var(--tinta-3) !important; stroke-width: 1.4 !important; }
.pl-agua { fill: #d9dfc9 !important; stroke: none !important; }
.pl-pileta { stroke: var(--hoja-osc) !important; stroke-width: 3 !important; }
.pl-ola { stroke: var(--hoja-osc) !important; stroke-width: 1.4 !important; opacity: .6; }
.pl-mesa { stroke: var(--techo) !important; stroke-width: 1.6 !important; }
.pl-arbol circle { fill: rgba(138, 141, 88, .2) !important; stroke: var(--hoja-osc) !important; stroke-width: 1.8 !important; }
.pl-hojita { stroke: var(--hoja-osc) !important; stroke-width: 1.4 !important; }
.pl-flecha, .pl-flecha-punta { stroke: var(--teja) !important; stroke-width: 2.6 !important; }
.pl-laguna { stroke: var(--hoja-osc) !important; stroke-width: 1.6 !important; }
/* Se dibuja cuando aparece */
.js .plano__hoja .pl-casa, .js .plano__hoja .pl-pileta, .js .plano__hoja .pl-cerco, .js .plano__hoja .pl-galeria, .js .plano__hoja .pl-flecha { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--curva) .2s; }
.js .plano__hoja .pl-cerco { stroke-dasharray: .006 .01; stroke-dashoffset: 0; opacity: 0; transition: opacity 1s .2s; }
.js .plano__hoja.visto .pl-casa, .js .plano__hoja.visto .pl-pileta, .js .plano__hoja.visto .pl-galeria, .js .plano__hoja.visto .pl-flecha { stroke-dashoffset: 0; }
.js .plano__hoja.visto .pl-cerco { opacity: 1; }

/* Los puntos: un número que late; al pasar el mouse (o tocar) aparece el nombre */
.plano__puntos { list-style: none; margin: 0; padding: 0; position: absolute; inset: clamp(10px, 2vw, 28px); }
.plano__puntos li { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.punto { position: relative; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta); }
.punto__num { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--teja); color: var(--cal); font: 600 1rem/1 var(--sans); box-shadow: 0 6px 14px -6px rgba(59, 56, 37, .6); transition: transform .3s var(--curva-salida), background .2s; }
.punto__num::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--teja); opacity: 0; }
.js .plano__hoja.visto .punto__num::before { animation: late 2.6s var(--curva) infinite; animation-delay: calc(var(--n, 0) * .3s); }
@keyframes late { 0% { opacity: .7; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
.punto__nombre { position: absolute; left: 50px; white-space: nowrap; padding: 6px 12px; background: var(--tinta); color: var(--cal); font: 500 .875rem/1.2 var(--sans); opacity: 0; translate: -6px 0; pointer-events: none; transition: opacity .25s, translate .35s var(--curva-salida); }
.punto:hover .punto__num, .punto:focus-visible .punto__num { transform: scale(1.12); background: var(--hoja-osc); }
.punto:hover .punto__nombre, .punto:focus-visible .punto__nombre { opacity: 1; translate: 0 0; }
.punto:active .punto__num { transform: scale(.94); }
.punto:focus-visible { outline: none; }
.punto:focus-visible .punto__num { outline: 3px solid var(--hoja); outline-offset: 3px; }
.punto--laguna .punto__num { background: var(--hoja-osc); }
/* Los de la derecha muestran el nombre hacia la izquierda */
.plano__puntos li:nth-child(5) .punto__nombre { left: auto; right: 50px; }
/* En el celular el nombre de cada punto va siempre a la vista, en una lista debajo */
@media (max-width: 700px) {
  .punto__num { width: 32px; height: 32px; font-size: .875rem; }
  .punto__nombre { display: none; }
}
.plano__leyenda { display: none; }
@media (max-width: 700px) {
  .plano__leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; list-style: none; margin: 18px 0 0; padding: 0; counter-reset: ley; }
  .plano__leyenda li { counter-increment: ley; display: flex; gap: 8px; align-items: center; font-size: .9375rem; }
  .plano__leyenda li::before { content: counter(ley); width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--teja); color: var(--cal); font: 600 .75rem/1 var(--sans); }
}

/* ---------- La galería ---------- */
.galeria { background: var(--cal-2) var(--grano); }
.galeria__cabecera { display: grid; gap: 20px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.galeria__cabecera .cabecera { margin: 0; }
@media (min-width: 1000px) { .galeria__cabecera { grid-template-columns: 1fr auto; } }
.galeria__filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.galeria__filtros button { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); font: 500 .9375rem/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .16s ease-out; }
.galeria__filtros button span { font-size: .75rem; opacity: .6; }
.galeria__filtros button:hover { background: var(--cal-3); }
.galeria__filtros button:active { transform: scale(.95); }
.galeria__filtros button[aria-pressed='true'] { background: var(--tinta); color: var(--cal); }
.galeria__grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(180px, 17vw, 260px); grid-auto-flow: dense; gap: clamp(8px, 1.1vw, 14px); }
.g { min-height: 0; }
.g[hidden] { display: none; }
.g--grande { grid-column: span 2; grid-row: span 2; }
.g--ancha { grid-column: span 2; }
.g--alta { grid-row: span 2; }
.g a { display: block; width: 100%; height: 100%; overflow: hidden; background: var(--cal-3); transition: transform .16s ease-out; }
.g a:active { transform: scale(.985); }
.g img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva-salida); }
.g a:hover img { transform: scale(1.05); }
.galeria__fuente { margin-top: 18px; font-size: .8125rem; color: var(--tinta-3); }
@media (max-width: 760px) {
  .galeria__grilla { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; }
  .galeria__filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .galeria__filtros button { flex: none; }
}
/* Al filtrar, las fotos se reacomodan (View Transitions) */
::view-transition-group(*.g) { animation-duration: .5s; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }