/* Municipalidad de Lago Puelo - hoja de estilos del sitio */

*{box-sizing:border-box}
:root{--ease-out:cubic-bezier(.23,1,.32,1);--tint:#0B7B7F}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F5F6F3;color:#10201E;font-family:Archivo,"Helvetica Neue",sans-serif;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
::selection{background:#0B7B7F;color:#fff}
:focus-visible{outline:2px solid #0B7B7F;outline-offset:3px;border-radius:5px}
input,textarea,select{caret-color:#0B7B7F}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:#075F63;text-decoration:none;transition:color 140ms var(--ease-out)}
.lnk:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.wide{font-variation-settings:"wdth" 118}
.press{transition:transform 140ms var(--ease-out),background-color 160ms var(--ease-out),border-color 160ms var(--ease-out),color 140ms var(--ease-out)}
.press:active{transform:scale(.985)}
.tap{transition:transform 140ms var(--ease-out),background-color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.tap:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .press:hover{border-color:#BBCFCA;background-color:#fff} a.lnk:hover{color:#B4441C} .navlink:hover{background-color:#F1F4F2} }
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#EDEFEC}
::-webkit-scrollbar-thumb{background:#C3CFCB;border:3px solid #EDEFEC;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#9FB0AB}
.rise{animation:rise 900ms var(--ease-out) both}
.rise-2{animation-delay:70ms}
.rise-3{animation-delay:140ms}
@keyframes rise{from{transform:translateY(14px)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} .press:active,.tap:active{transform:none} }
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
body{margin:0;background:#F5F6F3;color:#10201E;font-family:Archivo,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
.press{transition:transform 140ms var(--ease-out),background-color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.press:active{transform:scale(.99)}
.tap{transition:transform 140ms var(--ease-out),background-color 160ms var(--ease-out),border-color 160ms var(--ease-out),color 140ms var(--ease-out)}
.field{transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.field:focus-within{border-color:#0B7B7F;background-color:#fff}
.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms var(--ease-out),opacity 200ms var(--ease-out);opacity:0}
.fold>div{overflow:hidden;min-height:0}
.fold[data-open]{grid-template-rows:1fr;opacity:1}
.chev{transition:transform 200ms var(--ease-out)}
.chev[data-open]{transform:rotate(90deg)}
@media (hover:hover) and (pointer:fine){ .press:hover{background-color:#fff;border-color:#BBCFCA} a.lnk:hover{color:#B4441C} .navlink:hover{background-color:#F1F4F2} }
.field:focus-within{border-color:#0B7B7F}
.lbl{font-size:11px;letter-spacing:.18em;font-weight:700;color:#55615E}
.inp{transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.inp:focus{border-color:#0B7B7F;background-color:#fff}
button{font:inherit;cursor:pointer}
a{color:#075F63;text-decoration:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:#78847F}
@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important} .tap:active{transform:none} }

/* ---- Menú en celular (lo inyecta sitio.js) ---- */
.menu-btn{display:none;width:46px;height:46px;flex:none;border:1px solid #DDE2DE;border-radius:12px;background:#fff;align-items:center;justify-content:center}
.menu-btn .b1,.menu-btn .b2,.menu-btn .b3{transition:transform 200ms var(--ease-out),opacity 150ms var(--ease-out);transform-origin:center}
.menu-btn[data-open] .b1{transform:translateY(5px) rotate(45deg)}
.menu-btn[data-open] .b2{opacity:0}
.menu-btn[data-open] .b3{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:760px){
  .menu-btn{display:flex}
  header nav[aria-label="Principal"]{
    position:absolute;left:12px;right:12px;top:100%;z-index:20;
    flex-direction:column;align-items:stretch !important;gap:2px;
    background:#fff;border:1px solid #DDE2DE;border-radius:18px;padding:10px;
    box-shadow:0 18px 44px rgba(16,32,30,.22);
    transform-origin:top right;transform:scale(.97);opacity:0;visibility:hidden;
    transition:transform 200ms var(--ease-out),opacity 200ms var(--ease-out),visibility 0s linear 200ms;
  }
  header nav[aria-label="Principal"][data-open]{
    transform:scale(1);opacity:1;visibility:visible;
    transition:transform 200ms var(--ease-out),opacity 200ms var(--ease-out),visibility 0s;
  }
  header nav[aria-label="Principal"] a{font-size:17px;justify-content:flex-start;text-align:left}
  header{position:relative}
  /* El escudo y el nombre se achican para que el boton no caiga de linea */
  header>div{gap:12px !important;flex-wrap:nowrap !important}
  header>div>a:first-child>div:first-child{width:42px !important;height:47px !important;font-size:7px !important}
  header>div>a:first-child .wide{font-size:20px !important}
}

/* ---- Impresión: el vecino que imprime el boletín ---- */
@media print{
  header nav,.menu-btn,form,footer{display:none}
  .asentar,section img[alt*='lago'],section img[alt*='Costa']{display:none}
  body{background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#55615E}
}

/* ---- Fotografía de portada ----
   Un solo momento de autor: la foto se asienta al cargar, una vez.
   Solo transform, sin bucle, y anulado con prefers-reduced-motion. */
.asentar{animation:asentar 1200ms var(--ease-out) both;will-change:transform}
@keyframes asentar{from{transform:scale(1.045)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.asentar{animation:none}}

/* ---- Video de portada ----
   El póster siempre está; el video se carga sólo si el contexto lo justifica
   (lo decide sitio.js). Nunca en bucle: el ciclo termina de noche y se queda. */
.fondo-portada{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#0E2522}

/* ---- Botones ----
   El presionar es lo que más importa y ya estaba: scale(.97) a 140 ms.
   Lo que se suma acá es la respuesta al hover, y sólo donde hay puntero
   fino: en el celular el hover no existe.

   La flecha que corre 3 px hacia la derecha no es adorno: dice hacia dónde
   lleva el botón. Es la única animación de la tanda que comunica algo. */
.tap svg,.lnk svg{transition:transform 180ms var(--ease-out)}

@media (hover:hover) and (pointer:fine){
  /* Acciones principales: se elevan apenas y profundizan la sombra */
  .tap:hover{transform:translateY(-1px)}
  .tap:hover svg:last-child{transform:translateX(3px)}
  .lnk:hover svg:last-child{transform:translateX(3px)}

  /* La flecha de los enlaces diagonales sale en diagonal */
  .tap:hover svg[aria-hidden="true"] path[d^="M7 17"],
  .lnk:hover svg[aria-hidden="true"] path[d^="M7 17"]{transform:translate(1px,-1px)}

  /* El chevron de las filas de índice avanza, no se eleva */
  .press:hover{transform:none}
  .press:hover svg:last-child{transform:translateX(3px)}
}

/* El presionar siempre gana sobre el hover: la mano manda sobre el puntero */
.tap:active{transform:scale(.97)}
.press:active{transform:scale(.99)}

@media (prefers-reduced-motion:reduce){
  .tap svg,.lnk svg,.press svg{transition:none}
  .tap:hover,.press:hover{transform:none}
  .tap:hover svg:last-child,.lnk:hover svg:last-child,.press:hover svg:last-child{transform:none}
}

/* ================================================================
   VIDRIO
   Sólo sobre el video de portada y la franja de turismo: ahí hay una
   imagen detrás y el desenfoque hace algo real. Sobre fondo plano
   sería un disfraz, así que las páginas interiores no lo llevan.
   ================================================================ */

/* Vidrio turquesa — la acción principal.
   72 % de tinte: se ve el edificio a través y el blanco encima mantiene
   más de 5:1 tanto sobre el cuadro más claro del video como sobre el más
   oscuro. Un blanco casi opaco se leía como botón gris, no como vidrio. */
.vidrio{
  background:rgba(11,123,127,.72) !important;
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.42) !important;
  color:#fff !important;
  box-shadow:0 4px 20px rgba(8,20,18,.3), inset 0 1px 0 rgba(255,255,255,.55);
}
.vidrio svg{stroke:#fff}

/* Vidrio blanco — para acciones que caen sobre la franja turquesa,
   donde un vidrio del mismo tono desaparecería. */
.vidrio-blanco{
  background:rgba(255,255,255,.80) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.85) !important;
  color:#0A5A5E !important;
  box-shadow:0 4px 20px rgba(8,20,18,.22), inset 0 1px 0 rgba(255,255,255,.95);
}
.vidrio-blanco svg{stroke:#0A5A5E}

/* Vidrio oscuro — para acciones secundarias sobre imagen */
.vidrio-oscuro{
  background:rgba(255,255,255,.13) !important;
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(255,255,255,.26) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}

/* El brillo que cruza el vidrio al pasar el cursor.
   clip-path en vez de opacidad: se mueve, no parpadea. */
.vidrio,.vidrio-blanco,.vidrio-oscuro{position:relative;overflow:hidden;isolation:isolate}
.vidrio::after,.vidrio-blanco::after,.vidrio-oscuro::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
}
.vidrio-oscuro::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%)}

@media (hover:hover) and (pointer:fine){
  /* Más zoom, como pediste. En la portada se ve una vez por visita,
     así que acá el gesto puede ser más amplio que en el resto. */
  .vidrio:hover,.vidrio-blanco:hover,.vidrio-oscuro:hover{transform:scale(1.045)}
  .vidrio:hover::after,.vidrio-blanco:hover::after,.vidrio-oscuro:hover::after{
    transform:translateX(120%);transition:transform 620ms var(--ease-out)}
  .vidrio:hover{background:rgba(13,142,146,.78) !important}
  .vidrio-blanco:hover{background:rgba(255,255,255,.9) !important}
  .vidrio-oscuro:hover{background:rgba(255,255,255,.2) !important}
}

/* Presionar siempre gana sobre el hover: el dedo manda sobre el puntero */
.vidrio:active,.vidrio-blanco:active,.vidrio-oscuro:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .vidrio:hover,.vidrio-blanco:hover,.vidrio-oscuro:hover,
  .vidrio:active,.vidrio-blanco:active,.vidrio-oscuro:active{transform:none}
  .vidrio::after,.vidrio-blanco::after,.vidrio-oscuro::after{display:none}
}

/* ================================================================
   ENTRADA DE LA PORTADA
   Se ve una vez por visita, así que entra en el presupuesto de
   gusto. Corta: el buscador tiene que estar usable enseguida.
   ================================================================ */
.entra{animation:entra 620ms var(--ease-out) both}
.entra-2{animation-delay:90ms}
.entra-3{animation-delay:170ms}
.entra-4{animation-delay:240ms}
@keyframes entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .entra{animation:aparece 300ms ease both}
  @keyframes aparece{from{opacity:0}to{opacity:1}}
}

/* Elevación por valor, no por sombra: las tarjetas se separan con un
   escalón de tono y una línea de 1 px. La única sombra que queda es la
   del menú de celular, que sí flota sobre el contenido. */

/* ================================================================
   BOTONERA DEL ENCABEZADO
   Los enlaces tenían padding y radio pero ningún fondo en reposo, así
   que se leían como texto suelto. Ahora cada uno es una tecla visible.

   La jerarquía se sostiene en tres escalones: tecla neutra en reposo,
   un punto más oscura al pasar el cursor, y turquesa en la página
   actual. Si todas fueran iguales, la página actual se perdería.
   ================================================================ */
header nav[aria-label="Principal"] > a{
  background:#F1F4F2;
  border:1px solid #E4E9E6;
  transition:background-color 160ms var(--ease-out),
             border-color 160ms var(--ease-out),
             transform 140ms var(--ease-out);
}
header nav[aria-label="Principal"] > a[aria-current="page"]{
  border-color:#BCD8D6;
}
@media (hover:hover) and (pointer:fine){
  header nav[aria-label="Principal"] > a:hover{
    background:#E6EBE8;border-color:#CFD9D5;
  }
  header nav[aria-label="Principal"] > a[aria-current="page"]:hover{
    background:#DCEDEB;border-color:#A8CECB;
  }
}
header nav[aria-label="Principal"] > a:active{transform:scale(.97)}

/* El acceso cruzado al portal de turismo es la única acción de la barra
   institucional: se marca como tecla, el resto queda como enlace. */
header + div [href*="turismo"],
body > div > div:first-child [href*="turismo"]{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  padding:7px 13px;border-radius:8px;
  transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  body > div > div:first-child [href*="turismo"]:hover{
    background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34);
  }
}

/* En el panel de celular las teclas ocupan el ancho y pierden el borde:
   adentro de una tarjeta blanca, un borde por ítem sería ruido. */
@media (max-width:760px){
  header nav[aria-label="Principal"] > a{
    background:transparent;border-color:transparent;
  }
  header nav[aria-label="Principal"] > a[aria-current="page"]{
    background:#E6F1F0;border-color:transparent;
  }
}

@media (prefers-reduced-motion:reduce){
  header nav[aria-label="Principal"] > a:active{transform:none}
}