/* Instalaciones (quinchos.html) · 29/9/2026, ADR-026. Misma familia que Campamentos: usa grupos.css (terrenos con degradé y borde
   ondulado, carteles, filete con hoja, fotos con borde dorado, datos con ícono en círculo) y suma solo lo propio de esta página:
   las tarjetas de los cuatro quinchos, el bloque "Así se arma la estadía", la foto de los dormis y los vestuarios en cuatro.
   Sin rastro de huellas (no hay .rastro), así main.js no lo dibuja.
   Misma tarde, "animada": fotos nuevas del catálogo, barras de capacidad, carrusel de quinchos en el celular (instalaciones.js
   suma los botones), los 6 × 6 de los dormis, vestuarios con foto e íconos que se mueven y profundidad ligada al scroll. */

.inst .posta{padding-top:clamp(70px,7vw,110px)}
.inst .posta .tramo{height:0;margin:0}
.inst .posta[id]{scroll-margin-top:130px}
.inst-cab{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px,3vw,44px)}
.camp-main .inst-cab p{max-width:40ch;margin:0}
.inst-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,80px);align-items:center}
.inst-duo--inv{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.inst-fotos{position:relative;padding:0 13% 14% 0}
.inst-fotos__grande{aspect-ratio:3/2}
.inst-fotos__chica{position:absolute;right:0;bottom:0;width:38%;aspect-ratio:1;rotate:3deg;border:6px solid rgba(255,250,240,.92)}
.inst-dormis{aspect-ratio:913/841;max-width:560px}

/* Los cuatro quinchos: foto, número en círculo, capacidad en Cormorant y su sector de acampe */
.inst-quinchos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px;margin:0;padding:0;list-style:none}
.qc{display:grid;align-content:start;gap:12px;color:var(--texto)}
.qc .foto{aspect-ratio:4/4.4}
.camp-main .qc .qc__cap{margin:0;font:600 2.6rem/1 var(--serif);color:var(--titulo);font-variant-numeric:lining-nums}
.qc__cap small{margin-left:6px;font:500 1rem var(--font);color:var(--texto)}
.camp-main .qc h3{font-family:var(--font);font-size:1.14rem;font-weight:700;letter-spacing:0}
.camp-main .qc p{margin:0;font-size:1.04rem;line-height:1.55}
.qc__acampe{display:flex;align-items:flex-start;gap:10px;font-size:1rem;font-weight:600;line-height:1.35;color:var(--acento)}
.qc__acampe svg{width:20px;height:20px;flex:none}

.camp-main .inst-q1{margin:30px 0 0;font-size:1.06rem;max-width:none}
.inst-q1 a,.inst-estadia .nota a{color:var(--acento);font-weight:600;text-underline-offset:3px}

/* Acampe: dos datos sin número, con ícono en círculo */
.inst-lista{display:grid;gap:14px;margin:4px 0 22px;padding:0;list-style:none}
.inst-lista li{display:flex;align-items:center;gap:16px;font-size:1.1rem;line-height:1.45;color:var(--titulo)}
.inst-lista i{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;border:1px solid rgba(242,186,43,.5);background:var(--icono-fondo);color:var(--acento)}
.inst-lista svg{width:24px;height:24px}
.inst .dato span{min-height:2.7em}
.inst .posta--alba .dato strong{color:#8a6110}   /* el oro no alcanza contraste sobre el alba */

/* Así se arma la estadía: tres notas con ícono (familia de .nota de grupos.css) */
.inst-estadia{margin-top:clamp(50px,5vw,72px)}
.camp-main .inst-estadia__tit{font-family:var(--serif);font-size:clamp(1.9rem,2.6vw,2.4rem);font-weight:500;margin-bottom:0}
.inst-estadia .notas{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}

/* Vestuarios y servicios: los "mojones" de Cuidados, en cuatro columnas */
.inst .mojones{grid-template-columns:repeat(4,minmax(0,1fr))}
.inst .mojones li{grid-template-columns:1fr;gap:12px}
.inst .mojon{grid-row:auto;width:62px;height:62px}

/* Cierre */
.inst-cierre{max-width:760px;margin:0 auto;text-align:center}
.inst-cierre .filete{justify-content:center}
.camp-main .inst-cierre p{margin-inline:auto}
.inst-cierre .meta__acciones{justify-content:center}
.camp-main .inst-cierre h2{font-size:clamp(2.6rem,4.6vw,4.2rem)}

@media(max-width:1100px){
  .inst-quinchos{grid-template-columns:1fr 1fr}
  .inst .mojones{grid-template-columns:1fr 1fr}
  .inst-estadia .notas{grid-template-columns:1fr}
}
@media(max-width:760px){
  .inst .posta[id]{scroll-margin-top:110px}
  .inst-cab{display:block}
  .camp-main .inst-cab p{margin-top:10px}
  .inst-duo,.inst-duo--inv{grid-template-columns:1fr;gap:30px}
  .inst-quinchos{grid-template-columns:1fr 1fr;gap:28px 14px}
  .qc .foto{aspect-ratio:1}
  .camp-main .qc .qc__cap{font-size:2rem}
  .qc__acampe{font-size:.94rem}
  .inst .mojones{grid-template-columns:1fr}
  .inst-estadia .nota{grid-template-columns:1fr}
  .inst-estadia .nota i{grid-row:auto}
}

/* ---------- Animada (29/9/2026) ---------- */
.inst{--ease-foco:cubic-bezier(.23,1,.32,1)}
.inst .portada{overflow:clip}
.inst ::selection{background:rgba(242,186,43,.38)}

/* Capacidad: número que cuenta y barra dorada proporcional al Quincho 5 (300) */
.qc__cap [data-count]{display:inline-block;min-width:calc(var(--dig,3) * .5em);font-variant-numeric:lining-nums proportional-nums}
.qc__barra{display:block;height:5px;margin-top:-2px;border-radius:5px;background:rgba(125,80,12,.14);overflow:hidden}
.qc__barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d89b12,var(--oro) 60%,#ffd046);transform-origin:0 50%;transform:scaleX(var(--c,1))}
.inst-puntos{display:none}
.qc{scroll-margin-top:30px}

/* Acampe: la foto chica del fogón es vertical */
.inst-fotos__chica--alta{aspect-ratio:4/5;width:34%}

/* Dormis: seis casitas de seis camas */
.inst-camas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:420px;margin:-6px 0 26px;color:var(--acento)}
.dormi{width:100%;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.dormi__casa{stroke-dasharray:1;stroke-dashoffset:0}
.dormi__camas circle{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:50% 50%}
.camp-main .inst-camas__total{display:flex;align-items:baseline;gap:10px;margin:-8px 0 22px;font-size:1.06rem;color:var(--texto)}
.inst-camas__total strong{font:600 clamp(2.6rem,3.4vw,3.4rem)/1 var(--serif);color:var(--oro)}

/* Vestuarios: foto real al lado de los cuatro mojones */
.inst-vest{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(22px,2.4vw,34px);align-items:stretch}
.inst-vest__foto{position:relative;min-height:440px}
.inst-vest__foto img{position:absolute;inset:0}
.inst-vest .mojones{grid-template-columns:1fr 1fr}
.ducha__gotas path,.reloj__h,.reloj__m,.pelota__bola,.pelota__sombra{transform-box:view-box}
.reloj__h,.reloj__m{transform-origin:24px 24px}
.pelota__sombra{transform-origin:24px 44px}

@media(max-width:1100px){
  .inst-vest{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)}
  .inst-vest .mojones{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* Carrusel nativo: una tarjeta grande y la siguiente asomando */
  .inst-quinchos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80%,330px);gap:14px;
    margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter) 10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .inst-quinchos::-webkit-scrollbar{display:none}
  .qc{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:34px}
  .qc .foto{aspect-ratio:4/4.3}
  .camp-main .qc .qc__cap{font-size:2.4rem}
  .qc__acampe{font-size:1rem}
  .inst-puntos{display:flex;justify-content:center;gap:10px;margin-top:14px}
  .inst-puntos button{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(125,80,12,.35);border-radius:50%;background:rgba(255,250,240,.7);
    color:var(--titulo);font:600 1.3rem/1 var(--serif);cursor:pointer;user-select:none;-webkit-user-select:none;
    transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .12s var(--ease-foco)}
  .inst-puntos button[aria-pressed="true"]{background:var(--oro);border-color:var(--oro);color:var(--tinta-verde)}
  .inst-puntos button:active{transform:scale(.94)}
  .inst-fotos__chica--alta{width:40%}
  .inst .portada__foto{height:min(38svh,340px)}
  .inst-quinchos .qc{transform-origin:50% 0}
  .inst-camas{gap:7px;max-width:none}
  .inst-vest{grid-template-columns:1fr}
  .inst-vest__foto{min-height:0;aspect-ratio:16/10}
  .inst-vest__foto img{object-position:50% 80%}
  .inst .inst-vest .mojones li{grid-template-columns:auto 1fr;gap:4px 16px;padding:20px 20px}
  .inst .inst-vest .mojon{grid-row:span 2;width:56px;height:56px}
  .inst-vest .icono-anim{width:32px;height:32px}
  .camp-main .inst-vest .mojones h3{padding-top:2px}
}

@media(prefers-reduced-motion:no-preference){
  /* Tarjetas de quincho: entran y la barra crece hasta su capacidad */
  .qc.reveal{transition:opacity .5s ease,transform .7s var(--ease-foco)}
  .qc.reveal .qc__barra i{transition:transform 1.1s var(--ease-foco) .25s}
  html.js .qc.reveal:not(.is-in) .qc__barra i{transform:scaleX(0)}
  .inst-quinchos .qc:nth-child(2){transition-delay:.06s}.inst-quinchos .qc:nth-child(3){transition-delay:.12s}.inst-quinchos .qc:nth-child(4){transition-delay:.18s}

  /* Dormis: cada casita se dibuja y se van llenando sus seis camas */
  .inst-camas.reveal{transform:none}
  .inst-camas.is-in .dormi__casa{transition:stroke-dashoffset .8s var(--ease-foco) calc(var(--i) * .09s)}
  .inst-camas.is-in .dormi__camas circle{transition:opacity .2s ease calc(.3s + var(--i) * .09s + var(--j) * .045s),scale .45s var(--ease-foco) calc(.3s + var(--i) * .09s + var(--j) * .045s)}
  html.js .inst-camas:not(.is-in) .dormi__casa{stroke-dashoffset:1}
  html.js .inst-camas:not(.is-in) .dormi__camas circle{opacity:0;scale:.3}

  /* Vestuarios: la ducha larga agua un rato, el reloj da una vuelta, la pelota pica y el micro llega */
  .mojones.is-in .ducha__gotas path{animation:gota .9s cubic-bezier(.55,0,1,.45) 3 backwards}
  .mojones.is-in .ducha__gotas path:nth-child(2){animation-delay:.25s}.mojones.is-in .ducha__gotas path:nth-child(3){animation-delay:.5s}
  .mojones.is-in .ducha__gotas path:nth-child(4){animation-delay:.12s}.mojones.is-in .ducha__gotas path:nth-child(5){animation-delay:.38s}
  .mojones.is-in .reloj__m{animation:vuelta 1.2s var(--ease-foco) .35s both}
  .mojones.is-in .reloj__h{animation:vuelta-h 1.2s var(--ease-foco) .35s both}
  .mojones.is-in .pelota__bola{animation:pique 1.1s .3s 2 both}
  .mojones.is-in .pelota__sombra{animation:sombra 1.1s .3s 2 both}
  @keyframes gota{0%{opacity:0;transform:translateY(-4px)}25%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
  @keyframes vuelta{from{transform:rotate(-360deg)}to{transform:none}}
  @keyframes vuelta-h{from{transform:rotate(-30deg)}to{transform:none}}
  @keyframes pique{0%,100%{transform:none;animation-timing-function:cubic-bezier(.33,0,.67,0)}50%{transform:translateY(-9px);animation-timing-function:cubic-bezier(.33,1,.67,1)}}
  @keyframes sombra{0%,100%{transform:none;opacity:1}50%{transform:scaleX(.6);opacity:.5}}
  @media(hover:hover) and (pointer:fine){
    .mojones li:hover .ducha__gotas path{animation:gota .9s cubic-bezier(.55,0,1,.45) infinite}
    .mojones li:hover .reloj__m{animation:vuelta-otra 1s var(--ease-foco) both}
    .mojones li:hover .pelota__bola{animation:pique-otra 1.1s infinite}
    .mojones li:hover .pelota__sombra{animation:sombra-otra 1.1s infinite}
    @keyframes vuelta-otra{from{transform:rotate(-360deg)}to{transform:none}}
    @keyframes pique-otra{0%,100%{transform:none;animation-timing-function:cubic-bezier(.33,0,.67,0)}50%{transform:translateY(-9px);animation-timing-function:cubic-bezier(.33,1,.67,1)}}
    @keyframes sombra-otra{0%,100%{transform:none;opacity:1}50%{transform:scaleX(.6);opacity:.5}}
  }

  /* Profundidad ligada al scroll: la portada se queda atrás y el texto se aleja; las fotos se corren apenas dentro de su marco
     y la foto chica flota más rápido que la grande. En el carrusel, la tarjeta que llega crece. */
  @supports (animation-timeline:scroll()){
    @media(min-width:761px){
      .inst .portada__foto{animation:portada-atras linear both;animation-timeline:scroll(root);animation-range:0 100svh}
      .inst .portada__texto{animation:portada-lejos linear both;animation-timeline:scroll(root);animation-range:0 85svh}
      @keyframes portada-atras{to{translate:0 30svh}}
      @keyframes portada-lejos{to{translate:0 -70px;opacity:.15}}
    }
    @media(max-width:760px){   /* en el celular la foto va arriba del texto: se corre solo dentro de su marco */
      .inst .portada__foto img{scale:1.12;animation:asentar 2.2s var(--ease-fuerte) both,portada-dentro linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 60svh}
      @keyframes portada-dentro{from{translate:0 -4%}to{translate:0 5%}}
    }
  }
  @supports (animation-timeline:view()){
    .inst .foto:not(.inst-dormis) img{scale:1.08;animation:deriva linear both;animation-timeline:view();animation-range:cover}
    .inst .inst-fotos__chica{animation:flota linear both;animation-timeline:view();animation-range:cover}
    @keyframes deriva{from{translate:0 -3.5%}to{translate:0 3.5%}}
    @keyframes flota{from{translate:0 36px}to{translate:0 -36px}}
    @media(max-width:760px){
      .inst-quinchos .qc{animation:acerca linear both;animation-timeline:view(inline);animation-range:cover}
      @keyframes acerca{0%{scale:.9}45%,65%{scale:1}100%{scale:.94}}
    }
  }
}
@media(prefers-reduced-motion:reduce){
  .qc.reveal,.inst-camas.reveal{opacity:1!important;transform:none!important}
}

/* Sin barra pegajosa (mapa en el lateral, desde 1340 px) la sección queda justo debajo de la cabecera: 170 px de scroll-padding menos 78. */
@media(min-width:1340px){
  .inst .posta[id]{scroll-margin-top:-78px}
}