/* Inka Terra Asociación · home · Where we work, abierto (Rodrigo, 9 oct, sobre su referencia)
   Sin tarjetas, para que la home no sea una sucesión de bloques: sobre crema, a la izquierda el mapa a sangre
   (la aguada del Pacífico se funde con el fondo) y a la derecha el rótulo, el titular, la entrada y los cuatro
   paisajes como lista con filetes. El abierto lleva su nombre en bosque, la
   foto, la línea y el enlace.
   Se escribe sobre red.css e inicio.css sin tocarlos (clase .abierta en la sección). */

section.red.abierta{--crema:#F9F7F1;--sangria:26px;background:var(--crema);padding:clamp(56px,5vw,80px) 0;overflow:hidden}
.red.abierta .cuerpo{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,4.4vw,64px);align-items:stretch}

/* el mapa, sin caja: tan alto como el panel */
.red.abierta .mapa{min-height:620px}
.red.abierta .mapa svg{max-height:780px}   /* el mapa, algo menor que el panel (Rodrigo, 9 oct) */
.red.abierta .marca .caja{rx:6px}

/* la cabecera: el titular en la misma escala que el de How ITA works (modelo.css) */
.red.abierta .cab{margin:0}
.red.abierta .rotulo{display:inline-flex;align-items:center;gap:20px;font-size:12.5px;letter-spacing:.3em;color:var(--tinta-suave);margin-bottom:clamp(18px,1.8vw,26px)}
.red.abierta .rotulo i{width:56px;opacity:.6}
.red.abierta h2{font-family:var(--ui);font-weight:600;font-size:clamp(36px,3.7vw,54px);line-height:1;letter-spacing:-.035em;color:var(--bosque);max-width:none;margin:0 0 clamp(18px,1.8vw,26px);text-wrap:balance}
.red.abierta h2 em{font-style:normal;color:inherit}
.red.abierta .intro{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--tinta-suave);max-width:44ch;margin:0}

/* los cuatro paisajes: lista con filetes; el abierto, con su línea vertical a la izquierda */
.red.abierta .paisajes{margin-top:clamp(28px,2.6vw,40px);border-top:1px solid var(--linea)}
.red.abierta .paisaje{position:relative;display:flex;flex-direction:column;border-bottom:1px solid var(--linea)}
.red.abierta .paisaje > button{order:0;grid-template-columns:minmax(0,1fr) auto 20px;column-gap:18px;padding:clamp(18px,1.7vw,24px) 0 clamp(18px,1.7vw,24px) var(--sangria)}
.red.abierta .paisaje .nombre{font-weight:400;font-size:clamp(22px,1.9vw,27px);letter-spacing:-.02em;color:var(--tinta);transition:color .3s}
.red.abierta .paisaje.on .nombre{font-weight:600;font-size:clamp(26px,2.1vw,30px);color:var(--bosque)}
.red.abierta .paisaje > button:hover .nombre{color:var(--bosque)}
.red.abierta .paisaje .region{font-weight:500;font-size:12px;letter-spacing:.24em;color:var(--tinta-suave)}
.red.abierta .paisaje.on .region{font-weight:600;color:var(--bosque)}
.red.abierta .paisaje .mas{width:20px;height:20px;fill:none;stroke:var(--tinta);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;rotate:90deg;transition:rotate .35s var(--curva)}
.red.abierta .paisaje.on .mas{rotate:-90deg}
/* la foto, debajo del nombre; luego la línea y el enlace */
.red.abierta .portada{order:1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--curva)}
.red.abierta .paisaje.on .portada{grid-template-rows:1fr}
.red.abierta .portada > div{overflow:hidden;min-height:0}
.red.abierta .detalle{order:2}
.red.abierta .paisaje .foto{margin:0 0 20px var(--sangria);aspect-ratio:2.75/1;border-radius:6px;overflow:hidden;background:var(--linea-tenue)}
.red.abierta .paisaje .lugar{margin:0 0 18px var(--sangria);font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:var(--tinta-suave);max-width:40ch;min-height:3em}
.red.abierta .paisaje .ter{margin:0 0 26px var(--sangria)}


/* el mapa (como en la versión de tarjetas): países vecinos, puntos con aro blanco y rótulos como etiquetas de papel */
.red.abierta .vecinos text{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.26em;text-transform:uppercase;fill:rgba(92,99,83,.55)}
.red.abierta .marca .pt{r:4.4;stroke:#fff;stroke-width:2}
.red.abierta .marca .halo{r:11;opacity:.14}
.red.abierta .marca.activa .halo{opacity:.3;animation:none}
.red.abierta .marca .caja{fill:#fff;stroke:rgba(36,52,20,.12);stroke-width:.8;filter:drop-shadow(0 4px 10px rgba(36,52,20,.14))}
.red.abierta .marca .nombre{font-weight:600;font-size:15px;letter-spacing:-.015em;fill:var(--tinta)}
.red.abierta .marca .dep{font-size:8.5px;letter-spacing:.18em;fill:var(--musgo)}
.red.abierta .marca.activa .caja{fill:var(--bosque);stroke:var(--bosque)}
.red.abierta .marca.activa .nombre{fill:#fff}
.red.abierta .marca.activa .dep{fill:var(--salvia)}
@media (hover:hover) and (pointer:fine){.red.abierta .marca:not(.activa):hover .caja{stroke:rgba(36,52,20,.4)}}

/* tableta vertical y móvil: cabecera, mapa grande y la lista; sin hilo */
@media (max-width:960px),(orientation:portrait){
  section.red.abierta{padding:clamp(56px,9vw,88px) 0}
  .red.abierta .cuerpo{grid-template-columns:1fr;row-gap:clamp(24px,5vw,40px)}
  .red.abierta .mapa{min-height:0}
  .red.abierta .mapa svg{max-width:560px}
  .red.abierta .paisajes{margin-top:0}
}
@media (max-width:620px){
  section.red.abierta{--sangria:18px;padding:56px 0 64px}
  .red.abierta h2{font-size:38px}
  .red.abierta .intro{font-size:17px}
  .red.abierta .mapa svg{max-width:none;width:100%}
  .red.abierta .marca .nombre{font-size:17px}
  .red.abierta .marca .pt{r:4}
  .red.abierta .marca .halo{r:10}
  .red.abierta .vecinos text{font-size:15px}
  .red.abierta .paisaje > button{grid-template-columns:minmax(0,1fr) 20px;grid-template-rows:auto auto;row-gap:4px}
  .red.abierta .paisaje .nombre{grid-column:1;grid-row:1;font-size:22px}
  .red.abierta .paisaje.on .nombre{font-size:26px}
  .red.abierta .paisaje .region{grid-column:1;grid-row:2;justify-self:start}
  .red.abierta .paisaje .mas{grid-column:2;grid-row:1/3}
  .red.abierta .paisaje .foto{aspect-ratio:16/9}
}