/* Inka Terra Asociación · home · What's happening now v3 (Rodrigo, 11 oct, opción A)
   Baja y blanca. Ordenador: a la izquierda (columna estrecha) el rótulo, un titular pequeño en dos tonos y el enlace «View
   all»; a la derecha tres actividades en fila: foto 16:10 con radio 16, tipo · contexto en verde, el título y su estado.
   Tableta: la cabecera arriba, las tres en fila. Móvil: lista compacta con foto pequeña. Entrada una vez (js/ahora.js) */
.ahora{background:var(--papel);padding:clamp(72px,7vw,104px) 0}
.ahora .wrap{display:grid;grid-template-columns:minmax(200px,2.4fr) minmax(0,9.6fr);column-gap:clamp(32px,4vw,56px);align-items:start}
.ahora a{color:inherit;text-decoration:none}
.ahora .rotulo{display:inline-flex;align-items:center;gap:16px;margin:0 0 18px;font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--musgo);white-space:nowrap}
.ahora .rotulo i{display:block;width:40px;height:1px;background:currentColor;opacity:.6}
.ahora h2{margin:0 0 22px;max-width:10ch;font-family:var(--ui);font-weight:600;font-size:clamp(28px,2.3vw,34px);line-height:1.05;letter-spacing:-.03em;color:var(--tinta)}
.ahora h2 em{font-style:normal;color:var(--musgo)}
.ahora .todo{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid currentColor;font-family:var(--ui);font-weight:500;font-size:15.5px;color:var(--tinta);white-space:nowrap}
.ahora .todo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:translate .35s var(--curva)}
.ahora .lista-ahora{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,1.6vw,24px)}
.ahora figure{margin:0 0 16px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#E6E1D4}
.ahora figure img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--curva)}
.ahora .tipo{margin:0 0 6px;max-width:none;font-family:var(--ui);font-weight:600;font-size:13.5px;color:var(--musgo)}
.ahora .tipo span{font-weight:500;color:var(--salvia)}
.ahora h3{margin:0;font-family:var(--ui);font-weight:600;font-size:clamp(17px,1.35vw,19px);line-height:1.22;letter-spacing:-.02em;color:var(--tinta);text-wrap:balance}
.ahora .dato{margin:6px 0 0;max-width:none;font-family:var(--texto);font-size:13.5px;color:var(--gris)}
@media (hover:hover) and (pointer:fine){
  .ahora .lista-ahora a:hover figure img{scale:1.05}
  .ahora .lista-ahora a:hover h3{color:var(--bosque)}
  .ahora .todo:hover svg{translate:4px 0}
}
/* entrada, una sola vez al bajar */
.ahora.anim .cab-ahora,.ahora.anim .lista-ahora li{opacity:0;translate:0 16px}
.ahora.anim.entra .cab-ahora{opacity:1;translate:0 0;transition:opacity .8s ease,translate .9s var(--curva)}
.ahora.anim.entra .lista-ahora li{opacity:1;translate:0 0;transition:opacity .8s ease calc(.1s + var(--k,0) * .1s),translate .9s var(--curva) calc(.1s + var(--k,0) * .1s)}
/* tableta: la cabecera arriba en una fila (titular a la izquierda, enlace a la derecha) */
@media (max-width:960px),(orientation:portrait){
  .ahora .wrap{grid-template-columns:1fr;row-gap:28px}
  .ahora .cab-ahora{display:grid;grid-template-columns:1fr auto;align-items:end}
  .ahora .cab-ahora .rotulo{grid-column:1/-1}
  .ahora h2{margin:0;max-width:none}
}
/* móvil: lista compacta */
@media (max-width:620px){
  .ahora{padding:56px 0}
  .ahora .cab-ahora{grid-template-columns:1fr}
  .ahora .cab-ahora .todo{justify-self:start;margin-top:14px}
  .ahora .lista-ahora{grid-template-columns:1fr;row-gap:18px}
  .ahora .lista-ahora a{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:center}
  .ahora figure{margin:0;aspect-ratio:1}
  .ahora h3{font-size:16.5px}
}
.ahora h2{max-width:none;white-space:nowrap}
.ahora h2 br.d{display:inline}
@media (max-width:960px),(orientation:portrait){.ahora h2 br.d{display:none}}
/* (Rodrigo, 11 oct) titular con más fuerza, entrada corta, «View all» como botón (como en toda la página) y la fecha abajo */
.ahora .wrap{grid-template-columns:minmax(260px,3.4fr) minmax(0,8.6fr)}
.ahora h2{white-space:normal;max-width:9ch;margin:0 0 16px;font-size:clamp(38px,3.6vw,54px);line-height:.98;letter-spacing:-.04em}
.ahora .intro{margin:0 0 26px;max-width:26ch;font-family:var(--texto);font-size:15.5px;line-height:1.55;color:var(--tinta-suave)}
.ahora .btn-ahora{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 26px 0 28px;border-radius:16px;background:var(--bosque);color:#FBF8F1;font-family:var(--ui);font-weight:500;font-size:16px;letter-spacing:-.005em;white-space:nowrap}
.ahora .btn-ahora svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ahora .dato{margin-top:10px;font-family:var(--ui);font-weight:500;font-size:13.5px;color:var(--gris)}
@media (max-width:960px),(orientation:portrait){
  .ahora .wrap{grid-template-columns:1fr}
  .ahora .cab-ahora{display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:end}
  .ahora h2{max-width:none;margin:0}
  .ahora .intro{grid-column:1;margin:12px 0 0;max-width:none}
  .ahora .cab-ahora .btn-ahora{grid-column:2;grid-row:2/4}
}
@media (max-width:620px){
  .ahora .cab-ahora{grid-template-columns:1fr}
  .ahora h2{font-size:clamp(34px,9.4vw,40px);max-width:10ch}
  .ahora .cab-ahora .btn-ahora{grid-column:1;grid-row:auto;margin-top:20px;width:100%;justify-content:center}
}
@media (max-width:620px){.ahora h2{max-width:none}}
/* (Rodrigo, 11 oct) el titular vuelve a su tamaño anterior; el bloque de la izquierda no más alto que las fichas */
.ahora h2{max-width:none;white-space:nowrap;margin:0 0 12px;font-size:clamp(28px,2.3vw,34px);line-height:1.05;letter-spacing:-.03em}
.ahora .rotulo{margin-bottom:14px}
.ahora .intro{margin:0 0 20px;max-width:28ch;font-size:15px;line-height:1.5}
@media (max-width:960px),(orientation:portrait){.ahora h2{white-space:normal}}
/* móvil (Rodrigo, 11 oct): «View all» al final, tras las tres actividades; aire más ajustado */
.ahora .pie-ahora-m{display:none}
@media (max-width:620px){
  .ahora .cab-ahora .btn-ahora{display:none}
  .ahora .intro{margin-bottom:0}
  .ahora .wrap{row-gap:24px}
  .ahora .pie-ahora-m{display:block;margin:28px 0 0;max-width:none}
  .ahora .pie-ahora-m .btn-ahora{width:100%;justify-content:center}
}
@media (max-width:620px){.ahora .pie-ahora-m{margin-top:4px}}   /* con el hueco de la rejilla (24 px), la misma distancia que en Plan your visit (28 px) */
@media (max-width:620px){.ahora .pie-ahora-m{margin-top:20px}}   /* 24 + 20 = 44 px, igual que Plan your visit entre fotos y botón */
@media (max-width:620px){.ahora .pie-ahora-m{margin-top:4px}}   /* 24 + 4 = 28 px: lo mismo que se ve entre las fotos de Plan your visit y su botón */
