/* Actividades (actividades.html) · 3/10/2026, ADR-027. Misma familia que Campamentos e Instalaciones: usa grupos.css e
   instalaciones.css (terrenos con degradé y borde ondulado, carteles numerados, filete con hoja, fotos con borde dorado, datos,
   mojones con íconos que se mueven) y suma solo lo propio de esta página: los temas del taller, la palestra con las tres
   actividades de aventura, la fauna de la reserva, el recorrido de la Lujaneada y los íconos de lo incluido.
   Fotos sin personas identificables (regla 17 del manual de marca). */

.act .portada__foto img{object-position:50% 50%}
.camp-main.act .portada h1{max-width:15ch}
.act-ruta li::before{font-variant-numeric:lining-nums}
.camp-main .act-sub{font-family:var(--font);font-size:1.12rem;font-weight:700;letter-spacing:0;line-height:1.35;margin:30px 0 14px}

/* 1 · Supervivencia: los temas, como fichas con ícono */
.act-temas{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.act-temas li{display:inline-flex;align-items:center;gap:11px;min-height:50px;padding:6px 20px 6px 6px;border:1px solid var(--linea);border-radius:999px;
  background:var(--tarjeta);font-size:1.04rem;font-weight:600;color:var(--titulo)}
.act-temas i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1d4a32,var(--tinta-verde));color:#f4c531}
.act-temas svg{width:20px;height:20px}
.act .datos .dato strong{color:var(--oro-oscuro)}
.act .posta--arena .datos{margin-top:24px}

.palestra__tomas circle{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:50% 50%}
.tirolesa__polea,.arco__flecha{transform-box:view-box}

/* 3 · Exploradores: la foto del sendero, la fauna y qué llevar */

/* 4 · Lujaneada: el destacado de las torres y el recorrido en seis paradas */
.act-luj__fotos{padding:0 16% 12% 0}
.act-luj__fotos .inst-fotos__grande{aspect-ratio:4/4.6}
.act-luj__fotos .inst-fotos__chica{width:40%;aspect-ratio:3/4;border-color:#f3eadc}
.camp-main .act-torres{display:flex;align-items:center;gap:16px;max-width:none;margin:6px 0 30px;padding:14px 22px 14px 14px;border:1px solid rgba(244,197,49,.45);border-radius:18px;
  background:linear-gradient(135deg,rgba(244,197,49,.16),rgba(244,197,49,.03));font:italic 500 1.42rem/1.35 var(--serif);color:#f6e3b4}
.act-torres i{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--oro);color:var(--tinta-verde)}
.act-torres svg{width:30px;height:auto;margin-top:-2px}
.act-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.camp-main .act-ruta__tit{margin-top:clamp(70px,7vw,110px)}
.act-ruta{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none;counter-reset:parada}
.act-ruta::before{content:"";position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:28px;height:2px;transform-origin:0 50%;
  background:radial-gradient(circle,rgba(244,197,49,.75) 1.2px,transparent 1.7px) 0 50%/10px 2px repeat-x}
.act-ruta li{display:grid;justify-items:center;align-content:start;gap:8px;padding:0 10px;text-align:center;counter-increment:parada}
.act-ruta li::before{content:counter(parada);position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border-radius:50%;
  border:1px solid rgba(244,197,49,.6);background:#1d4c33;color:#f4c531;font:600 1.5rem/1 var(--serif)}
.act-ruta .act-ruta__bh::before{background:linear-gradient(135deg,#ffd046,var(--oro));border-color:var(--oro);color:var(--tinta-verde)}
.act-ruta strong{font:600 1.45rem/1.15 var(--serif);color:var(--titulo)}
.act-ruta span{max-width:19ch;font-size:1rem;line-height:1.45;color:var(--texto)}

/* 5 · Incluidas: la cancha y cuatro mojones con su ícono */
.fuego__llama,.pileta__ola,.hoja__rama{transform-box:view-box}
.fuego__llama{transform-origin:24px 34px}
.hoja__rama{transform-origin:14px 35px}
.mojones a{color:var(--acento);font-weight:600;text-underline-offset:3px}

@media(max-width:1100px){
  .act-ruta{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .act-ruta::before{display:none}
}
@media(max-width:760px){
  .act .portada__foto img{object-position:62% 55%}
  .act .datos{grid-template-columns:1fr 1fr}
  .act .dato{grid-template-columns:1fr;row-gap:8px;padding:18px 16px}
  .act .dato i{grid-row:auto;width:44px;height:44px}
  .act .dato i svg{width:22px;height:22px}
  .act .dato+.dato::before{left:0;right:auto;top:22%;width:1px;height:56%}
  .act .dato strong{font-size:2.3rem}
  .act-temas li{font-size:.98rem;min-height:46px;padding-right:16px}
  .act-temas i{width:34px;height:34px}
  .camp-main .act-torres{font-size:1.2rem;padding:12px 16px 12px 12px;gap:14px}
  .act-torres i{width:46px;height:46px}
  .act-acciones .camp-button{flex:1 1 100%;justify-content:center}
  .act-luj__fotos{padding:0 12% 16% 0}
  /* El recorrido baja en una columna, con la línea a la izquierda */
  .act-ruta{grid-template-columns:1fr;row-gap:0}
  .act-ruta::before{display:block;left:23px;right:auto;top:28px;bottom:28px;width:2px;height:auto;transform-origin:50% 0;
    background:radial-gradient(circle,rgba(244,197,49,.75) 1.2px,transparent 1.7px) 50% 0/2px 10px repeat-y}
  .act-ruta li{grid-template-columns:auto 1fr;justify-items:start;align-items:center;column-gap:16px;padding:10px 0;text-align:left}
  .act-ruta li::before{grid-row:span 2;width:48px;height:48px;margin:0;font-size:1.3rem}
  .act-ruta strong{font-size:1.35rem}
  .act-ruta span{max-width:none;font-size:.98rem}
  /* Incluidas: ícono más chico para que el texto use el ancho */
  .act .inst-vest .mojones li{gap:4px 14px;padding:18px}
  .act .inst-vest .mojon{width:46px;height:46px}
  .act .inst-vest .icono-anim{width:26px;height:26px}
  .act .inst-vest__foto img{object-position:50% 60%}
  .inst-cierre>.camp-link{display:none}
}

/* Movimiento: el recorrido de la Lujaneada se dibuja de parada en parada; los íconos se mueven una vez al aparecer
   (la flecha da en el blanco, la polea cruza, las tomas aparecen; el fuego, el agua y la hoja) y de nuevo al pasar el puntero. */
@media(prefers-reduced-motion:no-preference){
  .act-ruta.stagger>*{transition-duration:.55s}
  .act-ruta.stagger::before{transition:transform 1.4s var(--ease-mueve) .1s}
  html.js .act-ruta.stagger:not(.is-in)::before{transform:scaleX(0)}
  .act-ruta.stagger.is-in>*:nth-child(1){transition-delay:.1s}.act-ruta.stagger.is-in>*:nth-child(2){transition-delay:.32s}.act-ruta.stagger.is-in>*:nth-child(3){transition-delay:.54s}
  .act-ruta.stagger.is-in>*:nth-child(4){transition-delay:.76s}.act-ruta.stagger.is-in>*:nth-child(5){transition-delay:.98s}.act-ruta.stagger.is-in>*:nth-child(6){transition-delay:1.2s}
  @media(max-width:760px){html.js .act-ruta.stagger:not(.is-in)::before{transform:scaleY(0)}}

  .av-grid.is-in .palestra__tomas circle{animation:toma .45s var(--ease-fuerte) both}
  .av-grid.is-in .palestra__tomas circle:nth-child(1){animation-delay:.75s}.av-grid.is-in .palestra__tomas circle:nth-child(2){animation-delay:.63s}
  .av-grid.is-in .palestra__tomas circle:nth-child(3){animation-delay:.51s}.av-grid.is-in .palestra__tomas circle:nth-child(4){animation-delay:.39s}
  .av-grid.is-in .tirolesa__polea{animation:polea 1.3s var(--ease-mueve) .45s both}
  .av-grid.is-in .arco__flecha{animation:flecha .5s cubic-bezier(.2,.9,.3,1.25) .65s both}
  @keyframes toma{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
  @keyframes polea{from{transform:translate(-12px,-5.1px)}to{transform:none}}
  @keyframes flecha{from{opacity:0;transform:translate(14px,-14px)}to{opacity:1;transform:none}}

  .mojones.is-in .fuego__llama{animation:llama-ic 1.1s ease-in-out .3s 3 both}
  .mojones.is-in .pileta__ola{animation:ola-ic 1.6s ease-in-out .3s 2 both}
  .mojones.is-in .pileta__ola--2{animation-delay:.5s}
  .mojones.is-in .hoja__rama{animation:hoja-ic 1.6s ease-in-out .3s 2 both}
  @keyframes llama-ic{0%,100%{transform:none}30%{transform:scale(.92,1.08) skewX(3deg)}65%{transform:scale(1.05,.95) skewX(-2deg)}}
  @keyframes ola-ic{0%,100%{transform:none}50%{transform:translate(-3px,-2px)}}
  @keyframes hoja-ic{0%,100%{transform:none}35%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}}
  @media(hover:hover) and (pointer:fine){
    .av-card:hover .palestra__tomas circle{animation:toma-otra .45s var(--ease-fuerte) both}
    .av-card:hover .palestra__tomas circle:nth-child(1){animation-delay:.36s}.av-card:hover .palestra__tomas circle:nth-child(2){animation-delay:.24s}.av-card:hover .palestra__tomas circle:nth-child(3){animation-delay:.12s}
    .av-card:hover .tirolesa__polea{animation:polea-otra 1.1s var(--ease-mueve) both}
    .av-card:hover .arco__flecha{animation:flecha-otra .5s cubic-bezier(.2,.9,.3,1.25) both}
    .mojones li:hover .fuego__llama{animation:llama-ic-otra 1.1s ease-in-out infinite}
    .mojones li:hover .pileta__ola{animation:ola-ic-otra 1.6s ease-in-out infinite}
    .mojones li:hover .hoja__rama{animation:hoja-ic-otra 1.6s ease-in-out infinite}
    @keyframes toma-otra{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
    @keyframes polea-otra{from{transform:translate(-12px,-5.1px)}to{transform:none}}
    @keyframes flecha-otra{from{opacity:0;transform:translate(14px,-14px)}to{opacity:1;transform:none}}
    @keyframes llama-ic-otra{0%,100%{transform:none}30%{transform:scale(.92,1.08) skewX(3deg)}65%{transform:scale(1.05,.95) skewX(-2deg)}}
    @keyframes ola-ic-otra{0%,100%{transform:none}50%{transform:translate(-3px,-2px)}}
    @keyframes hoja-ic-otra{0%,100%{transform:none}35%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}}
  }
}
@media(prefers-reduced-motion:reduce){
  .act-ruta::before{transform:none!important}
}

/* ---------- Más vida (3/10/2026, tarde) ----------
   Una escena propia por sección, con piezas de la familia de Campamentos: chispas que suben del fuego en Supervivencia, el cable
   de la tirolesa con la polea que cruza al bajar en Aventura, pájaros que pasan en Exploradores, estrellas y el perfil de Luján
   en la Lujaneada, y ramas y ondas que se mecen. Todo suave (opacidades bajas) y quieto con movimiento reducido. */

/* Supervivencia: chispas sobre la foto del fuego; los minutos cuentan */
.act .dato strong{font-variant-numeric:lining-nums proportional-nums}
.act .dato strong b{font-weight:inherit}
.act-fuego{isolation:isolate}
.act-chispas{position:absolute;left:8%;top:-10%;width:56%;height:80%;z-index:3;pointer-events:none}
.act-chispas i{position:absolute;bottom:0;left:var(--x);width:calc(var(--s) * 1.6);height:calc(var(--s) * 1.6);border-radius:50%;background:radial-gradient(circle,#fffbe0 0%,#ffc45a 45%,rgba(255,140,40,0) 100%);opacity:0}

/* Aventura: cable de tirolesa cruzando el bosque */
.act-cable{position:absolute;left:-4%;right:-4%;top:clamp(14px,1.4vw,24px);z-index:0;height:0;transform:rotate(3.6deg);transform-origin:0 0;pointer-events:none;color:var(--oro)}
.act-cable::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:linear-gradient(90deg,rgba(242,186,43,0),rgba(242,186,43,.55) 8%,rgba(242,186,43,.55) 92%,rgba(242,186,43,0))}
.act-cable__carro{position:absolute;inset:0;transform:translateX(62%)}
.act-cable__polea{position:absolute;left:0;top:-16px;width:clamp(48px,4.4vw,64px);height:auto;transform:rotate(-3.6deg);transform-origin:50% 21%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.act .posta--bosque .posta__helecho{color:var(--oro)}

/* Exploradores: pájaros */
.act-aves{position:absolute;inset:clamp(20px,2.8vw,40px) 0 auto;height:160px;z-index:0;overflow:hidden;pointer-events:none;color:#8f4312}
.act-ave{position:absolute;left:0;top:var(--y);width:calc(38px * var(--e));opacity:.7;transform:translateX(-60px)}
.act-ave svg{display:block;width:100%;height:auto;transform-origin:50% 90%}

/* Lujaneada: estrellas arriba y el perfil de Luján abajo */
.act-luj{padding-bottom:clamp(130px,11vw,170px)}
.act-luj .estrellas{opacity:.75}
.act-horizonte{position:absolute;left:0;bottom:0;z-index:0;display:block;width:100%;height:clamp(90px,11vw,160px);color:rgba(6,30,18,.5);pointer-events:none}

/* Incluidas: ondas y rama en dorado suave */
.act .posta--arena .posta__ondas{opacity:.14}

@media(max-width:760px){
  .act-cable{top:18px;transform:rotate(6deg)}
  .act-cable__polea{transform:rotate(-6deg);width:38px}
  .act-aves{height:120px}
  .act-luj{padding-bottom:120px}
  .act-chispas{left:6%;width:58%}
}

@media(prefers-reduced-motion:no-preference){
  .act-chispas i{animation:act-chispa var(--t) cubic-bezier(.2,.6,.4,1) var(--d) infinite}
  @keyframes act-chispa{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),-240px) scale(.3)}}

  /* La polea cruza el cable a medida que se baja; sin scroll-driven, cruza una vez al aparecer */
  @supports (animation-timeline:view()){
    .act-cable__carro{animation:act-cruce linear both;animation-timeline:view(block 0px);animation-range:cover 0vh cover 58vh}
  }
  @supports not (animation-timeline:view()){
    .act-cable__carro{animation:act-cruce 3.2s cubic-bezier(.77,0,.175,1) .4s both}
  }
  @keyframes act-cruce{from{transform:translateX(-6%)}to{transform:translateX(84%)}}
  .act-cable__polea{animation:act-hamaca 2.6s ease-in-out 4}
  @keyframes act-hamaca{0%,100%{rotate:0deg}50%{rotate:5deg}}

  .act-ave{animation:act-vuelo var(--t) linear var(--d) infinite}
  .act-ave svg{animation:act-aleteo .42s ease-in-out infinite alternate}
  .act-ave:nth-child(2) svg{animation-duration:.5s}.act-ave:nth-child(3) svg{animation-duration:.36s}
  @keyframes act-vuelo{0%{transform:translate(-60px,0)}50%{transform:translate(50vw,-14px)}100%{transform:translate(calc(100vw + 60px),6px)}}
  @keyframes act-aleteo{from{transform:scaleY(1)}to{transform:scaleY(.35)}}

  @supports (animation-timeline:view()){
    .act-horizonte{animation:act-amanecer linear both;animation-timeline:view(block 0px);animation-range:entry 0% cover 60%}
    @keyframes act-amanecer{from{transform:translateY(40%);opacity:.2}to{transform:none;opacity:1}}
  }

  /* Los íconos de los temas hacen lo suyo al aparecer y al pasar el puntero */
  .act-temas svg *{transform-box:fill-box}
  .act-temas.is-in .tema-gota svg{animation:tema-gota 1.1s ease-in .5s 2 both}
  .act-temas.is-in .tema-llama svg{animation:tema-llama 1s ease-in-out .6s 3 both;transform-origin:50% 90%}
  .act-temas.is-in .tema-carpa svg{animation:tema-carpa .7s cubic-bezier(.2,1.3,.4,1) .7s both;transform-origin:50% 100%}
  .act-temas.is-in .tema-brujula svg path{animation:tema-brujula 1.4s cubic-bezier(.23,1,.32,1) .8s both;transform-origin:50% 50%}
  .act-temas.is-in .tema-lista svg path:last-child{stroke-dasharray:30;animation:tema-tilde .8s ease-out .4s both}
  @keyframes tema-gota{0%{transform:translateY(-3px);opacity:.3}60%{transform:translateY(1px);opacity:1}100%{transform:none}}
  @keyframes tema-llama{0%,100%{transform:none}35%{transform:scale(.9,1.1)}70%{transform:scale(1.06,.94)}}
  @keyframes tema-carpa{from{transform:scaleY(0)}to{transform:none}}
  @keyframes tema-brujula{from{transform:rotate(-200deg)}to{transform:none}}
  @keyframes tema-tilde{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
  @media(hover:hover) and (pointer:fine){
    .act-temas li{transition:transform .25s var(--ease-fuerte),border-color .2s ease}
    .act-temas li:hover{transform:translateY(-2px);border-color:rgba(125,80,12,.5)}
    .act-temas li.tema-llama:hover svg{animation:tema-llama-otra 1s ease-in-out infinite;transform-origin:50% 90%}
    .act-temas li.tema-brujula:hover svg path{animation:tema-brujula-otra 1.2s cubic-bezier(.23,1,.32,1) both;transform-origin:50% 50%}
    .act-temas li.tema-gota:hover svg{animation:tema-gota-otra 1.1s ease-in infinite}
    @keyframes tema-llama-otra{0%,100%{transform:none}35%{transform:scale(.9,1.1)}70%{transform:scale(1.06,.94)}}
    @keyframes tema-brujula-otra{from{transform:rotate(-200deg)}to{transform:none}}
    @keyframes tema-gota-otra{0%{transform:translateY(-3px);opacity:.3}60%{transform:translateY(1px);opacity:1}100%{transform:none}}
  }
}
@media(prefers-reduced-motion:reduce){
  .act-chispas,.act-aves{display:none}
  .act-cable__carro{transform:translateX(62%)}
}

/* ---------- Ficha de cada actividad (3/10/2026, noche) ----------
   Las cuatro actividades siguen el mismo orden, y cada una entra en una pantalla de compu: cartel, nombre grande con una
   pincelada dorada, la frase, qué es, los datos clave en una línea y el detalle (temas, las tres de aventura, fauna o las torres).
   La foto va al lado, centrada en altura; en el celular va después del texto, así el nombre es lo primero que se ve. */
.act-p{padding-top:clamp(52px,4.4vw,76px)!important}
.camp-main .act-p[id]{scroll-margin-top:0}   /* el enlace del mapa deja la sección justo debajo del mapa */
.act-p:not(.act-luj){padding-bottom:clamp(64px,6vw,100px)}
.act-ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,5.4vw,96px);align-items:center}
.act-ficha--inv{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.act-ficha--inv .act-ficha__visual{order:-1}
.act-ficha__visual{display:grid;justify-items:center}

.camp-main .act-nombre{margin:0;font:600 clamp(3.2rem,6.6vw,6.6rem)/.95 var(--serif);letter-spacing:-.032em;color:var(--titulo);white-space:nowrap}
.act-nombre__txt{position:relative;display:inline-block;padding-bottom:.13em}
.act-nombre__txt::after{content:"";position:absolute;left:-1%;right:-3%;bottom:0;height:.18em;background:linear-gradient(90deg,#d89b12,var(--oro) 40%,#ffd046);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 16C46 5 82 21 128 11S214 4 252 13s34-2 45-6' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 16C46 5 82 21 128 11S214 4 252 13s34-2 45-6' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/100% 100% no-repeat}
.camp-main .act-lema{margin:10px 0 16px;font:italic 500 clamp(1.6rem,2.2vw,2.2rem)/1.2 var(--serif);color:var(--titulo);max-width:none}
.camp-main .act-lema em{font-style:italic;color:var(--acento)}
.camp-main .act-que{margin:0 0 16px;font-size:1.1rem;line-height:1.6;max-width:48ch}

/* Datos clave en una línea */
.act-datos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.act-datos li{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:7px 16px 7px 12px;border:1px solid var(--linea);border-radius:999px;background:var(--tarjeta);
  font-size:.98rem;font-weight:600;line-height:1.25;color:var(--titulo)}
.act-datos svg{flex:none;width:19px;height:19px;color:var(--acento)}
.act .posta--bosque .act-datos li,.act .posta--musgo .act-datos li{background:rgba(255,255,255,.06)}

/* Detalle de cada una, más compacto para que entre en la pantalla */
.act-ficha .act-sub{margin:4px 0 10px}
.act-ficha .act-temas li{min-height:46px}
.act-ficha__visual .inst-fotos{width:100%}
.act-ficha .act-torres{margin:0 0 22px}

/* Aventura: las tres en una fila, cada una con su ícono arriba */
@media(min-width:901px){
}
.act-luj__fotos .inst-fotos__grande{aspect-ratio:4/3.9}
@media(max-width:1100px){
  .act-ficha,.act-ficha--inv{gap:40px}
  .camp-main .act-nombre{font-size:clamp(3rem,6.4vw,4.6rem)}
}
@media(max-width:900px){
  .act-ficha,.act-ficha--inv{grid-template-columns:1fr;gap:28px}
  .act-ficha--inv .act-ficha__visual,.act-ficha__visual{order:0}
  .camp-main .act-nombre{font-size:clamp(3.1rem,15vw,4.7rem)}
}
@media(max-width:760px){
  .camp-main .act-lema{font-size:1.6rem}
  .camp-main .act-que{font-size:1.04rem}
}

@media(prefers-reduced-motion:no-preference){
  /* La pincelada se dibuja de izquierda a derecha cuando el nombre aparece */
  html.js .act-nombre.reveal:not(.is-in) .act-nombre__txt::after{clip-path:inset(0 100% 0 0)}
  .act-nombre.reveal.is-in .act-nombre__txt::after{clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.77,0,.175,1) .35s}
}
/* Notebooks y pantallas bajas: un poco más compacto para que cada actividad entre entera */
@media(min-width:901px) and (max-height:820px){
  .act-p{padding-top:34px!important}
  .camp-main .act-nombre{font-size:clamp(3rem,5.6vw,5.6rem)}
  .camp-main .act-lema{margin:6px 0 12px;font-size:clamp(1.5rem,2vw,1.9rem)}
  .camp-main .act-que{margin-bottom:12px}
  .act-datos{margin-bottom:16px}
  .act-luj__fotos .inst-fotos__grande{aspect-ratio:4/3.4}
}

/* Portada en la compu: oscurecimiento suave detrás del texto para que se lea sobre la foto del bosque.
   Una sombra lateral que se desvanece hacia la derecha y otra más localizada detrás del título y la bajada. */
@media(min-width:761px){
  .act .portada::before{
    background:
      radial-gradient(52% 62% at 24% 56%,rgba(5,16,10,.5) 0%,rgba(5,16,10,.28) 55%,rgba(5,16,10,0) 100%),
      linear-gradient(90deg,rgba(7,18,12,.72) 0%,rgba(7,18,12,.46) 38%,rgba(7,18,12,.14) 64%,rgba(7,18,12,0) 78%),
      linear-gradient(180deg,rgba(7,18,12,.55) 0%,rgba(7,18,12,0) 20%,rgba(7,18,12,0) 62%,rgba(10,32,22,.55) 84%,#0f2d1e 100%)}
}

/* Portada que rota entre tres fotos (BH0562 tronco, BH0567 sendero y BH0553 gotas), solo con CSS: cada una se funde con la
   siguiente cada 8 s y se aquieta apenas (escala 1,05 a 1). Con movimiento reducido queda solo la primera. En el celular cada
   foto tiene su recorte vertical (-v). */
.act .portada__foto.act-rota{overflow:hidden}
.act .portada__foto.act-rota picture{position:absolute;inset:0;display:block;opacity:0}
.act .portada__foto.act-rota picture:first-child{opacity:1}
.act .portada__foto.act-rota img{width:100%;height:100%;object-fit:cover;animation:none;scale:1;translate:none}
.act .portada__foto.act-rota picture:nth-child(1) img{object-position:50% 50%}
.act .portada__foto.act-rota picture:nth-child(2) img{object-position:50% 55%}
.act .portada__foto.act-rota picture:nth-child(3) img{object-position:50% 50%}
@media(prefers-reduced-motion:no-preference){
  .act .portada__foto.act-rota picture{animation:act-rota 24s linear infinite;will-change:opacity,transform}
  .act .portada__foto.act-rota picture:nth-child(1){animation-delay:-1.2s}
  .act .portada__foto.act-rota picture:nth-child(2){animation-delay:6.8s}
  .act .portada__foto.act-rota picture:nth-child(3){animation-delay:14.8s}
  @keyframes act-rota{
    0%{opacity:0;transform:scale(1.05);animation-timing-function:cubic-bezier(.23,1,.32,1)}
    5%{opacity:1;transform:scale(1.045)}
    33%{opacity:1;transform:scale(1.015);animation-timing-function:ease-in-out}
    38%{opacity:0;transform:scale(1)}
    100%{opacity:0;transform:scale(1)}}
}

/* "Ver las actividades": botón centrado al pie de la portada, con borde dorado y una flecha que late */
.act-ver{position:absolute;left:50%;bottom:clamp(34px,6vh,64px);z-index:2;display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:8px 10px 8px 28px;border-radius:999px;
  border:2px solid var(--oro);background:rgba(7,18,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff7ea;font-size:1.14rem;font-weight:700;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 18px 36px -18px rgba(0,0,0,.7),0 0 0 6px rgba(242,186,43,.14);translate:-50% 0;transition:background-color .25s ease,color .25s ease,scale .12s cubic-bezier(.23,1,.32,1)}
.act-ver i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--oro);color:var(--tinta-verde)}
.act-ver svg{width:22px;height:22px}
.act-ver:active{scale:.97}
@media(hover:hover) and (pointer:fine){.act-ver:hover{background:var(--oro);color:var(--tinta-verde)}.act-ver:hover i{background:var(--tinta-verde);color:var(--oro)}}
@media(prefers-reduced-motion:no-preference){
  .act-ver i svg{animation:act-baja 1.6s ease-in-out infinite}
  .act-ver{animation:act-aro 2.6s ease-out infinite}
  @keyframes act-baja{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
  @keyframes act-aro{0%{box-shadow:0 18px 36px -18px rgba(0,0,0,.7),0 0 0 0 rgba(242,186,43,.4)}70%,100%{box-shadow:0 18px 36px -18px rgba(0,0,0,.7),0 0 0 14px rgba(242,186,43,0)}}
}
/* Celular: la foto ocupa toda la pantalla, el texto va abajo sobre un degradé oscuro y los dos botones quedan al alcance del pulgar */
@media(max-width:760px){
  .act .portada{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;padding:104px 0 calc(88px + env(safe-area-inset-bottom,0px));background:#07120c}
  .act .portada__foto.act-rota{position:absolute;inset:0;height:auto;z-index:0}
  .act .portada__foto::after{display:none}
  .act .portada::before{content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(7,18,12,.5) 0%,rgba(7,18,12,.08) 16%,rgba(7,18,12,.42) 30%,rgba(7,18,12,.78) 48%,rgba(7,18,12,.93) 68%,#07120c 100%)}
  .act .portada__texto{position:relative;z-index:2;margin:0;padding-block:0 4px}
  .camp-main.act .portada h1{max-width:none;font-size:clamp(3.4rem,16vw,4.6rem);line-height:.96;margin-bottom:16px}
  .act .portada .filete{margin-bottom:16px}
  .camp-main .act .portada__bajada,.camp-main.act .portada__bajada{font-size:1.08rem;line-height:1.55;margin-bottom:6px;max-width:34ch}
  .act-ver{position:relative;left:auto;bottom:auto;translate:none;z-index:2;display:flex;width:max-content;max-width:calc(100% - 36px);margin:22px auto 0;min-height:60px;padding-left:26px;font-size:1.1rem}
  .act-ver i{width:38px;height:38px}
  .act-ver:active{scale:.97}
}

/* Las postas de Actividades van sin cartel: el nombre ya es el título, así que no se repite. El espacio de arriba lo da la sección. */
.act-p .act-ficha{padding-top:clamp(8px,1vw,16px)}

/* Supervivencia: foto de Fernando (BH0557) y fuegos chicos (BH0402). La foto grande es vertical. */
.act-ficha .act-fernando{aspect-ratio:4/3.6;width:min(100%,560px);justify-self:center}
.act-ficha .act-fuego{padding:0 14% 16% 0;max-width:620px}
@media(max-width:760px){.act-ficha .act-fernando{width:100%;aspect-ratio:4/3.6}.act-ficha .act-fernando img{object-position:50% 60%!important}.act-ficha .act-fuego{max-width:none;padding:0 10% 16% 0}}

/* ---------- Kit de Supervivencia: tarjeta y escena del fogón con ferrocerio ----------
   Dibujo de línea, como las láminas de técnicas de supervivencia, sin tarjeta, junto a "Qué se trabaja": una rama que gira
   con un arco, apoyada en una tabla y sujeta arriba con una piedra.
   En pantallas anchas va en el margen izquierdo, a la altura de los temas; en las demás, debajo de los temas.
   Ciclo rápido (unos 3 s): el arco sierra, el taladro gira y saltan chispas; nace la brasa, pasa al nido y prende la llama.
   actividades.js lo arranca al verse y lo repite mientras está en pantalla; se repite también al tocarlo. El estado de base
   es el fuego ya prendido (sin JavaScript o con movimiento reducido). */
.act-ficha__texto{position:relative}
.act-llama{position:relative;display:block;width:210px;margin:20px 0 0;padding:0;overflow:visible;cursor:pointer;
  border:0;border-radius:12px;background:none;color:var(--tinta-verde);-webkit-tap-highlight-color:transparent;transition:scale .12s cubic-bezier(.23,1,.32,1)}
@media(min-width:1560px){
  .act-llama{position:absolute;right:calc(100% + clamp(28px,3vw,56px));bottom:-6px;margin:0;width:240px}
}
.act-llama:active{scale:.97}
.act-llama:focus-visible{outline:3px solid var(--oro-oscuro);outline-offset:4px}
.act-llama>svg{display:block;width:100%;height:auto;overflow:visible}
.act-llama__pie{display:block;margin-top:2px;font:700 .72rem/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#7d500c}
.act-llama__otra{position:absolute;right:9px;bottom:7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(16,40,28,.08);color:#7d500c;opacity:.75;transition:opacity .2s ease}
.act-llama__otra svg{width:13px;height:13px}
@media(hover:hover) and (pointer:fine){.act-llama:hover .act-llama__otra{opacity:1}}

.fa-piso{fill:none;stroke:rgba(16,40,28,.45);stroke-width:1.4;stroke-linecap:round}
.fa-piso--pasto{stroke:rgba(16,40,28,.3)}
/* Escena del fuego: se arma el fogón (yesca, ramitas en pirámide y dos leños) y se enciende raspando un ferrocerio */
.fg-yesca{fill:#d9b861;stroke:#c29a3c;stroke-width:1.2;stroke-linejoin:round}
.fg-yesca-pelo{fill:none;stroke:#a98625;stroke-width:1.1;stroke-linecap:round}
.fg-ramita{fill:none;stroke:#d9a46a;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.fg-leno rect{fill:#8a5a2e;stroke:#f3eadc;stroke-width:1.6}
.fg-leno ellipse{fill:#c9955a;stroke:#f3eadc;stroke-width:1.2}
.fg-barra{opacity:0}
.fg-barra__varilla{fill:none;stroke:#cfd5da;stroke-width:3.6;stroke-linecap:round}
.fg-barra__mango{fill:none;stroke:#ff8a2a;stroke-width:8;stroke-linecap:round}
.fg-barra__cordon{fill:none;stroke:#f3eadc;stroke-width:1.3;stroke-linecap:round}
.fg-raspador{opacity:0}
.fg-raspador__placa{fill:#8d98a0;stroke:#f3eadc;stroke-width:1.3}
.fg-raspador__ojal{fill:#10281c;stroke:#f3eadc;stroke-width:.8}
.fg-raspador__filo{fill:none;stroke:#fff;stroke-width:1.1;stroke-linecap:round;opacity:.9}
.fg-chispa{fill:#ffe08a;opacity:0;filter:drop-shadow(0 0 2px #ff9a2e)}
.fg-brasa{opacity:0}
.fa-humo{fill:none;stroke:rgba(16,40,28,.42);stroke-width:1.4;stroke-linecap:round;opacity:0}
.fa-llama__ext{fill:#ffb347;stroke:#10281c;stroke-width:1.8;stroke-linejoin:round}
.fa-llama__int{fill:#fff1c2}
.fa-llama,.fa-llama__i{transform-box:fill-box;transform-origin:50% 100%}
.fg-leno,.fg-barra,.fg-raspador,.fg-yesca,.fg-yesca-pelo,.fg-brasa,.fg-chispa,.fa-humo{transform-box:fill-box}
.fg-leno,.fg-yesca,.fg-yesca-pelo,.fg-brasa,.fg-chispa,.fa-humo{transform-origin:50% 100%}
.fg-barra{transform-box:view-box}

@media(max-width:760px){.act-llama{width:min(100%,250px);margin:22px auto 0}}

@media(prefers-reduced-motion:no-preference){
  /* antes de arrancar: sin llama (queda el fogón armado) */
  html.js .act-llama:not(.is-on) .fa-llama{opacity:0}

  /* 0 a 1,5 s: se arma el fogón. Primero la yesca, después las ramitas una por una y al final los leños, que caen y rebotan */
  .act-llama.is-on[data-escena="fuego"] .fg-yesca,.act-llama.is-on[data-escena="fuego"] .fg-yesca-pelo{animation:fg-aparece .35s cubic-bezier(.2,1.3,.4,1) both}
  .act-llama.is-on[data-escena="fuego"] .fg-ramita{animation:fg-traza .34s ease-out calc(.3s + var(--i) * .16s) both}
  .act-llama.is-on[data-escena="fuego"] .fg-leno--i{animation:fg-cae .5s cubic-bezier(.3,1.4,.5,1) 1.05s both}
  .act-llama.is-on[data-escena="fuego"] .fg-leno--d{animation:fg-cae .5s cubic-bezier(.3,1.4,.5,1) 1.2s both}
  @keyframes fg-aparece{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
  @keyframes fg-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes fg-cae{0%{opacity:0;transform:translateY(-22px) rotate(-8deg)}60%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:none}}

  /* 1,7 a 5,7 s: entra el ferrocerio y se queda quieto, apoyado en la yesca. Aparte, desde el otro lado, entra el rascador (una placa
     de acero), se apoya en la varilla y la raspa hacia abajo tres veces; entre una pasada y otra se aparta. Con cada pasada saltan chispas */
  .act-llama.is-on[data-escena="fuego"] .fg-barra{animation:fg-barra 4s cubic-bezier(.3,0,.2,1) 1.7s both}
  .act-llama.is-on[data-escena="fuego"] .fg-raspador{animation:fg-raspador 3s cubic-bezier(.4,0,.3,1) 2.1s both}
  .act-llama.is-on[data-escena="fuego"] .fg-chispa{animation:fg-chispa .48s ease-out calc(2.88s + var(--d)) 3 both}
  @keyframes fg-barra{0%{opacity:0;transform:translate(34px,-26px)}10%{opacity:1;transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translate(34px,-26px)}}
  @keyframes fg-raspador{
    0%{opacity:0;transform:translate(-36px,12px)}9%{opacity:1}20%{opacity:1;transform:translate(0,0)}
    29%{transform:translate(0,18px)}32%{transform:translate(-4px,18px)}35%{transform:translate(-4px,0)}36%{transform:translate(0,0)}
    45%{transform:translate(0,18px)}48%{transform:translate(-4px,18px)}51%{transform:translate(-4px,0)}52%{transform:translate(0,0)}
    61%{transform:translate(0,18px)}65%{opacity:1;transform:translate(-5px,18px)}82%,100%{opacity:0;transform:translate(-40px,14px)}}
  @keyframes fg-chispa{0%{opacity:0;transform:translate(0,0) scale(1.2)}12%{opacity:1}60%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25)}}

  /* 3,1 s en adelante: la yesca brilla, prende y la llama sube por las ramitas; queda ardiendo con humo */
  .act-llama.is-on[data-escena="fuego"] .fg-brasa{animation:fg-brasa .8s ease-out 3.9s both}
  .act-llama.is-on[data-escena="fuego"] .fa-llama{animation:fa-llama-nace .8s cubic-bezier(.2,1.3,.35,1) 4.4s both}
  .act-llama.is-on[data-escena="fuego"] .fa-llama__i{animation:fa-llama-late .55s ease-in-out 5.2s infinite}
  .act-llama.is-on[data-escena="fuego"] .fa-humo--nido{animation:fa-voluta 1.4s ease-out calc(4.8s + var(--d)) infinite both}
  @keyframes fg-brasa{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.4)}100%{opacity:.8;transform:scale(1)}}
  @keyframes fa-llama-nace{0%{opacity:0;transform:scale(.15,.05)}30%{opacity:1}100%{opacity:1;transform:none}}
  @keyframes fa-llama-late{0%,100%{transform:none}25%{transform:scale(.93,1.08) skewX(3deg)}50%{transform:scale(1.04,.95)}75%{transform:scale(.97,1.05) skewX(-3deg)}}
  @keyframes fa-voluta{0%{opacity:0;transform:translateY(4px) scaleY(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-14px) scaleY(1.1)}}
}

/* ---------- Supervivencia como manual de campo (3/10/2026, noche) ----------
   Solo esta sección. Papel cálido con curvas de nivel de un mapa y una brújula; sello del taller junto al título; un "kit"
   oscuro con brasas que reúne la técnica de fuego por fricción y los temas que se practican; fotos pegadas con cinta como en
   una bitácora. Acento brasa (#e8692a) sobre los verdes y dorados del sitio. */
.act-sv{--brasa:#e8692a;--brasa-clara:#ffb347;
  --suelo:radial-gradient(42% 46% at 6% 92%,rgba(232,105,42,.14),transparent 70%),radial-gradient(50% 50% at 96% 4%,rgba(255,255,255,.55),transparent 70%),linear-gradient(170deg,#f8efdf 0%,#f2e3c8 100%)}
.act-sv .act-ficha{position:relative;z-index:1}

/* Curvas de nivel: detrás de las fotos, se dibujan al llegar */
.sv-topo{position:absolute;right:0;top:0;z-index:0;width:min(62%,980px);height:100%;pointer-events:none;
  fill:none;stroke:rgba(125,80,12,.2);stroke-width:1.2;-webkit-mask:linear-gradient(90deg,transparent,#000 30%);mask:linear-gradient(90deg,transparent,#000 30%)}
.sv-topo path{stroke-dasharray:1;stroke-dashoffset:0}
/* Brújula de línea, arriba a la derecha */
.sv-brujula{position:absolute;right:max(10px,calc((100% - 1380px) / 2));top:clamp(40px,5vw,70px);z-index:0;width:clamp(120px,11vw,170px);height:auto;pointer-events:none;
  fill:none;stroke:rgba(125,80,12,.42);stroke-width:1.3;stroke-linecap:round}
.sv-brujula__giro{transform-box:view-box;transform-origin:100px 100px}
.sv-brujula__aguja{fill:rgba(125,80,12,.12)}
.sv-brujula__norte{fill:var(--brasa);stroke:none;opacity:.85}
.sv-brujula text{fill:#7d500c;stroke:none;font:700 15px var(--font)}

/* Título con el sello del taller */
.sv-cab{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px)}
.sv-sello{flex:none;width:clamp(78px,6.6vw,104px);color:#7d500c;rotate:-8deg}
.sv-sello svg{display:block;width:100%;height:auto;overflow:visible}
.sv-sello__aro{fill:#fbf3e2;stroke:currentColor;stroke-width:1.6}
.sv-sello__aro2{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:2 3}
.sv-sello__texto{transform-box:view-box;transform-origin:60px 60px}
.sv-sello text{fill:currentColor;font:700 9.6px var(--font);letter-spacing:1.5px}
.sv-sello__llama{fill:var(--brasa)}

/* El kit: panel oscuro con brasa */
.sv-kit{position:relative;display:grid;grid-template-columns:minmax(150px,.75fr) minmax(0,1.6fr);gap:clamp(14px,1.6vw,24px);align-items:center;margin-top:6px;
  padding:clamp(16px,1.6vw,22px);border-radius:24px;color:#f3eadc;overflow:hidden;
  background:radial-gradient(60% 90% at 12% 100%,rgba(232,105,42,.34),transparent 70%),linear-gradient(160deg,#173a27 0%,#10281c 60%,#0c1f15 100%);
  box-shadow:0 30px 50px -30px rgba(16,40,28,.8),inset 0 0 0 1px rgba(255,179,71,.22)}
.sv-kit__fuego{display:grid;justify-items:center;gap:2px}
.camp-main .sv-kit__nota{margin:0;font:700 .72rem/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--brasa-clara);max-width:none}
.camp-main .sv-kit__tit{margin:0 0 10px;font:700 .78rem/1.2 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--brasa-clara)}
.sv-temas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act-sv .sv-temas li{min-height:44px;padding:5px 12px 5px 5px;border-color:rgba(255,179,71,.28);background:rgba(255,255,255,.06);color:#fbf3e2;font-size:.98rem}
.act-sv .sv-temas li:last-child{grid-column:1/-1;justify-self:start}
.act-sv .sv-temas i{width:34px;height:34px;background:radial-gradient(circle at 35% 30%,#ff9a4d,#c4501c);color:#fff4e0}
.act-sv .sv-temas i svg{width:18px;height:18px}
@media(hover:hover) and (pointer:fine){.act-sv .sv-temas li:hover{border-color:rgba(255,179,71,.6);background:rgba(255,255,255,.1)}}

/* La técnica de fuego dentro del kit: línea clara sobre el fondo oscuro */
.act-sv .act-llama{position:relative;right:auto;bottom:auto;width:100%;max-width:200px;margin:0;rotate:0deg;color:#f3eadc}
.act-sv .fa-piso{stroke:rgba(243,234,220,.4)}
.act-sv .fa-piso--pasto{stroke:rgba(243,234,220,.28)}
.act-sv .fa-humo{stroke:rgba(243,234,220,.5)}
.act-sv .fa-llama__ext{stroke:#f3eadc}

/* Fotos pegadas con cinta */
.act-sv .sv-fotos{padding:0 12% 15% 0}
.act-sv .sv-fotos .foto{border-radius:6px;border:9px solid #fffaf0;box-shadow:0 26px 40px -24px rgba(60,40,10,.6);overflow:visible}
.act-sv .sv-fotos .foto::after{display:none}
.act-sv .sv-fotos .foto img{border-radius:2px}
.act-sv .sv-fotos .act-fernando{rotate:-1.8deg}
.act-sv .sv-fotos .inst-fotos__chica{rotate:5deg;width:40%;aspect-ratio:4/3.4;border-width:7px}
.sv-cinta{position:absolute;z-index:2;width:92px;height:26px;background:rgba(233,214,168,.82);box-shadow:0 2px 4px rgba(0,0,0,.1);pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent calc(100% - 3px));mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent calc(100% - 3px))}
.sv-cinta--a{left:-22px;top:-12px;rotate:-38deg}
.sv-cinta--b{right:-22px;top:-12px;rotate:36deg}
.sv-cinta--c{left:50%;top:-16px;translate:-50% 0;rotate:-6deg;width:84px}

@media(min-width:1560px){.act-sv .act-llama{position:relative;right:auto;bottom:auto}}
@media(max-width:1100px){.sv-kit{grid-template-columns:1fr}.sv-kit__fuego{max-width:220px;justify-self:center}}
@media(max-width:760px){
  .act-sv .act-ficha__texto{min-width:0}
  .sv-cab{display:block;position:relative}
  .sv-sello{position:absolute;right:-4px;top:54px;width:58px}
  .sv-topo{width:100%;opacity:.7}
  .sv-brujula{display:none}
  .sv-temas{grid-template-columns:1fr}
  .act-sv .sv-temas li:last-child{grid-column:auto}
  .act-sv .sv-fotos{padding:0 8% 18% 0}
}

@media(prefers-reduced-motion:no-preference){
  html.js .act-sv:not(:has(.sv-kit.is-in)) .sv-topo path{stroke-dashoffset:1}
  .act-sv:has(.sv-kit.is-in) .sv-topo path{transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1) calc(var(--k) * .08s)}
  .sv-sello__texto{animation:sv-gira 26s linear infinite}
  @keyframes sv-gira{to{transform:rotate(360deg)}}
  @supports (animation-timeline:view()){
    .sv-brujula__giro{animation:sv-brujula linear both;animation-timeline:view();animation-range:cover}
    @keyframes sv-brujula{from{transform:rotate(-40deg)}to{transform:rotate(30deg)}}
  }
  .sv-kit.reveal{transition:opacity .6s ease,transform .8s var(--ease-fuerte)}
  .sv-cinta{transition:opacity .4s ease .6s}
  html.js .sv-fotos .foto.reveal:not(.is-in) .sv-cinta{opacity:0}
}

/* ---------- Supervivencia: ajustes de la auditoría (3/10/2026, noche) ----------
   Instructor con nombre, botón propio, un solo resplandor de brasa, sello que informa y gira solo al aparecer, brújula fuera de
   las fotos, kit en tres escenas (agua, fuego, refugio) y, en el celular, la foto antes de los datos y los temas en dos columnas. */
.act-sv{--suelo:radial-gradient(50% 50% at 96% 4%,rgba(255,255,255,.55),transparent 70%),linear-gradient(170deg,#f8efdf 0%,#f2e3c8 100%)}
.camp-main .sv-instructor{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:-4px 0 18px;max-width:none;font-size:1rem;color:#5a4a33}
.sv-instructor strong{font:italic 600 1.55rem/1.1 var(--serif);color:var(--tinta-verde)}

/* Sello: ya no gira todo el tiempo, da una vuelta al aparecer el título */
@media(prefers-reduced-motion:no-preference){
  .sv-sello__texto{animation:none}
  .sv-cab:has(.act-nombre.is-in) .sv-sello__texto{animation:sv-gira-una 1.8s cubic-bezier(.23,1,.32,1) .3s both}
  @keyframes sv-gira-una{from{transform:rotate(-120deg)}to{transform:none}}
}
/* Brújula: arriba, fuera de las fotos; solo donde hay margen */
.sv-brujula{top:clamp(26px,3vw,40px);right:max(10px,calc((100% - 1560px) / 2));width:clamp(110px,8vw,140px)}
@media(max-width:1500px){.sv-brujula{display:none}}

/* Kit: escenas y su leyenda */
.sv-kit__nota span{display:none}
.sv-kit[data-escena="agua"] .sv-kit__nota [data-esc="agua"],.sv-kit[data-escena="refugio"] .sv-kit__nota [data-esc="refugio"],
.sv-kit:not([data-escena="agua"]):not([data-escena="refugio"]):not([data-escena="organizacion"]):not([data-escena="casos"]) .sv-kit__nota [data-esc="fuego"]{display:inline}
.sv-kit__pasos{display:flex;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.sv-kit__pasos li{width:18px;height:3px;border-radius:2px;background:rgba(243,234,220,.25);transition:background-color .3s ease,width .3s var(--ease-fuerte)}
.sv-kit[data-escena="agua"] .sv-kit__pasos [data-esc="agua"],.sv-kit[data-escena="refugio"] .sv-kit__pasos [data-esc="refugio"],
.sv-kit:not([data-escena="agua"]):not([data-escena="refugio"]):not([data-escena="organizacion"]):not([data-escena="casos"]) .sv-kit__pasos [data-esc="fuego"]{width:30px;background:var(--brasa-clara)}
.act-llama .esc{opacity:0;visibility:hidden}
.act-llama:not([data-escena="agua"]):not([data-escena="refugio"]):not([data-escena="organizacion"]):not([data-escena="casos"]) .esc-fuego,.act-llama[data-escena="agua"] .esc-agua,.act-llama[data-escena="refugio"] .esc-refugio{opacity:1;visibility:visible}
.act-sv .act-llama{max-width:220px}

/* Escena agua: filtro casero con una botella cortada, boca abajo. Tela en el cuello, carbón vegetal en el cuerpo; el agua turbia entra por arriba y sale clara por la tapa con orificios */
.ag-botella{fill:rgba(243,234,220,.07);stroke:#f3eadc;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.ag-carbon{fill:#2a2522;stroke:#b3a898;stroke-width:.7;stroke-linejoin:round}
.ag-turbia{fill:url(#ag-grad);opacity:.92;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.9)}
.ag-tela{fill:#f3eadc;opacity:.95}
.ag-tela-trama{fill:none;stroke:#b9a88a;stroke-width:.7;stroke-linecap:round}
.ag-tapa{fill:#2f7a52;stroke:#f3eadc;stroke-width:1.2}
.ag-orificio{fill:#10281c}
.ag-vaso{fill:none;stroke:#f3eadc;stroke-width:1.8;stroke-linejoin:round}
.ag-agua-v{fill:#86d2ee;opacity:.9;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.8)}
.ag-gota{fill:#86d2ee;opacity:0;transform-box:fill-box;transform-origin:50% 0}
.ag-chorro{fill:none;stroke:#a5733e;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.ag-jarra{opacity:0;transform-box:fill-box;transform-origin:0 0}
.ag-jarra__cuerpo{fill:rgba(243,234,220,.12);stroke:#f3eadc;stroke-width:1.5;stroke-linejoin:round}
.ag-jarra__liquido{fill:#a5733e}
.ag-chispa{fill:#fff6cf;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
/* Escena refugio: dos horquetas, la cumbrera y las ramas apoyadas una por una */
.rf-horqueta,.rf-cumbrera,.rf-rama{fill:none;stroke:#d9a46a;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.rf-cumbrera{stroke:#f3eadc;stroke-width:2.6}
.rf-hojas{fill:none;stroke:#7fc07a;stroke-width:2;stroke-linecap:round}

@media(prefers-reduced-motion:no-preference){
  /* 0 a 1,9 s: aparece la botella, se rellena el cuerpo con trozos de carbón que caen y se acomodan */
  .act-llama.is-on[data-escena="agua"] .ag-botella{stroke-dasharray:1;animation:ag-dibuja .6s ease-out both}
  .act-llama.is-on[data-escena="agua"] .ag-tela,.act-llama.is-on[data-escena="agua"] .ag-tela-trama,.act-llama.is-on[data-escena="agua"] .ag-tapa,.act-llama.is-on[data-escena="agua"] .ag-orificio,.act-llama.is-on[data-escena="agua"] .ag-vaso{animation:ag-aparece .4s ease-out .2s both}
  .act-llama.is-on[data-escena="agua"] .ag-carbon{transform-box:fill-box;transform-origin:50% 50%;animation:ag-carbon .42s cubic-bezier(.3,1.35,.5,1) calc(.6s + var(--i) * .055s) both}
  /* 2 a 4,6 s: entra la jarra con agua turbia, se inclina y la vierte; el nivel sube y se va aclarando */
  .act-llama.is-on[data-escena="agua"] .ag-jarra{animation:ag-jarra 3.1s cubic-bezier(.4,0,.2,1) 2s both}
  .act-llama.is-on[data-escena="agua"] .ag-chorro{animation:ag-chorro 2.2s ease-in-out 2.55s both}
  .act-llama.is-on[data-escena="agua"] .ag-turbia{animation:ag-sube 2.8s cubic-bezier(.25,.7,.3,1) 2.6s both}
  /* 3,6 s en adelante: gotas de agua clara salen por la tapa y llenan el vaso */
  .act-llama.is-on[data-escena="agua"] .ag-gota{animation:ag-cae 1s ease-in calc(3.7s + var(--d)) 3 both}
  .act-llama.is-on[data-escena="agua"] .ag-agua-v{animation:ag-llena 3.2s cubic-bezier(.3,.6,.4,1) 3.8s both}
  .act-llama.is-on[data-escena="agua"] .ag-chispa{animation:ag-brilla .9s ease-out 7s both}
  .act-llama.is-on[data-escena="agua"] .ag-chispa--2{animation-delay:7.25s}
  @keyframes ag-dibuja{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:1}}
  @keyframes ag-aparece{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
  @keyframes ag-carbon{from{opacity:0;transform:translateY(-34px) rotate(-30deg) scale(.8)}to{opacity:1;transform:none}}
  @keyframes ag-jarra{0%{opacity:0;transform:translate(14px,-8px) rotate(0)}14%{opacity:1;transform:none}30%{opacity:1;transform:rotate(-58deg)}80%{opacity:1;transform:rotate(-58deg)}94%{opacity:1;transform:translate(14px,-8px) rotate(0)}100%{opacity:0;transform:translate(14px,-8px)}}
  @keyframes ag-chorro{0%{stroke-dashoffset:1}18%{stroke-dashoffset:0}78%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
  @keyframes ag-sube{from{transform:scaleY(.04)}to{transform:scaleY(.9)}}
  @keyframes ag-cae{0%{opacity:0;transform:scale(.3)}22%{opacity:1;transform:none}100%{opacity:.9;transform:translateY(13px)}}
  @keyframes ag-llena{from{transform:scaleY(.06)}to{transform:scaleY(.8)}}
  @keyframes ag-brilla{0%{opacity:0;transform:scale(.2) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}100%{opacity:0;transform:scale(.6) rotate(90deg)}}

  .act-llama.is-on[data-escena="refugio"] .rf-horqueta{stroke-dasharray:70;animation:rf-traza .5s ease-out both}
  .act-llama.is-on[data-escena="refugio"] .rf-horqueta--2{animation-delay:.2s}
  .act-llama.is-on[data-escena="refugio"] .rf-cumbrera{animation:rf-baja .5s cubic-bezier(.2,1.3,.4,1) .6s both}
  .act-llama.is-on[data-escena="refugio"] .rf-rama{stroke-dasharray:70;animation:rf-traza .38s ease-out calc(1.1s + var(--i) * .22s) both}
  .act-llama.is-on[data-escena="refugio"] .rf-hojas{animation:rf-aparece .6s ease-out 2.4s both}
  @keyframes rf-traza{from{stroke-dashoffset:70}to{stroke-dashoffset:0}}
  @keyframes rf-baja{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
  @keyframes rf-aparece{from{opacity:0}to{opacity:1}}
  .esc{transition:opacity .25s ease}
}

/* Celular: la foto apenas después de la frase, los datos y el resto debajo; temas en dos columnas */
@media(max-width:760px){
  .act-sv .act-ficha{display:flex;flex-direction:column;gap:0}
  .act-sv .act-ficha__texto{display:contents}
  .act-sv .sv-cab{order:1}
  .act-sv .act-lema{order:2}
  .act-sv .act-ficha__visual{order:3;margin:6px 0 26px}
  .act-sv .act-datos{order:4}
  .act-sv .act-que{order:5}
  .act-sv .sv-instructor{order:6}
  .act-sv .sv-kit{order:7}
  .sv-temas{grid-template-columns:1fr 1fr}
  .act-sv .sv-temas li{font-size:.92rem;padding-right:8px}
  .act-sv .sv-temas li:last-child{grid-column:1/-1}
}
/* Compacto para que Supervivencia entre en una pantalla de compu */
.camp-main .act-sv .act-nombre{font-size:clamp(3rem,5.4vw,5.4rem)}
.act-sv .act-ficha{align-items:start}
.act-sv .act-ficha__visual{display:grid;justify-items:center;gap:6px;padding-top:12px}
.act-sv .act-datos{margin-bottom:14px}
.camp-main .act-sv .sv-instructor{margin:0 0 16px}
.sv-kit{grid-template-columns:150px minmax(0,1fr);padding:14px 16px}
.act-sv .sv-temas{gap:6px}
.act-sv .sv-temas li{min-height:40px;font-size:.92rem;padding:4px 10px 4px 4px;white-space:nowrap}
.act-sv .sv-temas i{width:30px;height:30px}
.act-sv .sv-temas i svg{width:16px;height:16px}
@media(min-width:901px) and (max-height:820px){.camp-main .act-sv .act-nombre{font-size:clamp(2.8rem,4.6vw,4.4rem)}.act-sv .act-que{font-size:1rem;margin-bottom:10px}}
@media(max-width:760px){
  .act-sv .act-ficha__visual{display:contents}
  .act-sv .sv-fotos{order:3;margin:6px 0 26px}
  .act-sv .sv-temas li{white-space:normal}
}
@media(min-width:901px) and (max-height:820px){
  .act-sv .act-lema{margin:4px 0 10px}
  .act-sv .sv-fotos{padding:0 12% 12% 0}
  .act-sv .act-fernando{width:min(100%,480px)}
  .act-sv .sv-kit{padding:12px 14px}
  .act-sv .act-llama{max-width:180px}
}
.sv-kit{grid-template-columns:172px minmax(0,1fr)}
.camp-main .sv-kit__nota{white-space:nowrap}
@media(min-width:901px) and (max-height:820px){.act-sv .act-datos{margin-bottom:10px}.camp-main .act-sv .sv-instructor{margin-bottom:12px}.act-sv .sv-temas li{min-height:36px}}
@media(min-width:901px) and (max-height:820px){.camp-main .act-sv .act-lema{font-size:1.5rem}.act-sv .act-que{line-height:1.55}.act-sv .sv-kit{margin-top:0}}
@media(max-width:1100px){.sv-kit{grid-template-columns:1fr}.sv-kit__fuego{justify-self:center}}
@media(max-width:760px){
  .act-sv .sv-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .act-sv .sv-sello{position:static;width:64px}
}
/* Temas que tienen escena: botones que muestran su animación en el kit */
.act-sv .sv-temas li:has(.sv-tema){padding:0}
.sv-tema{display:flex;align-items:center;gap:11px;width:100%;min-height:inherit;padding:4px 10px 4px 4px;border:0;border-radius:999px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:scale .12s var(--ease-fuerte)}
.sv-tema:active{scale:.97}
.sv-tema:focus-visible{outline:2px solid var(--brasa-clara);outline-offset:2px}
.act-sv .sv-temas li:has(.sv-tema[aria-pressed="true"]){border-color:var(--brasa-clara);background:rgba(255,179,71,.18)}
@media(hover:hover) and (pointer:fine){.act-sv .sv-temas li:has(.sv-tema):hover{border-color:rgba(255,179,71,.7)}}

/* Kit con cinco escenas (organización y casos de supervivencia, 3/10/2026): leyenda y marcas según data-escena */
.sv-kit .sv-kit__nota span{display:none!important}
.sv-kit[data-escena="organizacion"] .sv-kit__nota [data-esc="organizacion"],.sv-kit[data-escena="agua"] .sv-kit__nota [data-esc="agua"],.sv-kit[data-escena="fuego"] .sv-kit__nota [data-esc="fuego"],
.sv-kit[data-escena="refugio"] .sv-kit__nota [data-esc="refugio"],.sv-kit[data-escena="casos"] .sv-kit__nota [data-esc="casos"]{display:inline!important}
.sv-kit .sv-kit__pasos li{width:14px;background:rgba(243,234,220,.25)}
.sv-kit[data-escena="organizacion"] .sv-kit__pasos [data-esc="organizacion"],.sv-kit[data-escena="agua"] .sv-kit__pasos [data-esc="agua"],.sv-kit[data-escena="fuego"] .sv-kit__pasos [data-esc="fuego"],
.sv-kit[data-escena="refugio"] .sv-kit__pasos [data-esc="refugio"],.sv-kit[data-escena="casos"] .sv-kit__pasos [data-esc="casos"]{width:26px;background:var(--brasa-clara)}
.act-llama[data-escena="organizacion"] .esc-organizacion,.act-llama[data-escena="casos"] .esc-casos{opacity:1;visibility:visible}
.act-llama[data-escena="organizacion"] .esc-fuego,.act-llama[data-escena="casos"] .esc-fuego{opacity:0;visibility:hidden}

/* Escena organización: una lista en la tabla de notas que se va tildando */
.or-hoja{fill:#f3eadc;stroke:#f3eadc;stroke-width:1.5}
.or-clip{fill:#d9a46a;stroke:#10281c;stroke-width:1.4}
.or-caja{fill:none;stroke:#10281c;stroke-width:1.5}
.or-linea{fill:none;stroke:rgba(16,40,28,.45);stroke-width:2.4;stroke-linecap:round}
.or-tilde{fill:none;stroke:var(--brasa);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:0}
.or-lapiz path{fill:#ffb347;stroke:#f3eadc;stroke-width:1.2;stroke-linejoin:round}
.or-lapiz .or-lapiz__punta{fill:#3d2a16}
.or-lapiz{transform-box:view-box}
/* Escena casos: una persona con mochila, grande y sola entre pocos pinos, desorientada; mira a un lado y al otro con signos de pregunta */
.cs-pino{transform-box:fill-box;transform-origin:50% 100%}
.cs-pino path,.cs-pino rect{stroke:rgba(243,234,220,.4);stroke-width:.9;stroke-linejoin:round}
.cs-pino--fondo path{fill:#2a5a3f}.cs-pino--fondo rect{fill:#4a3a28}
.cs-pino--frente path{fill:#357a52}.cs-pino--frente rect{fill:#5a4430}
.cs-gira,.cs-cabeza,.cs-brazo{transform-box:fill-box}
.cs-gira{transform-origin:50% 100%}
.cs-pierna{fill:none;stroke:#f3eadc;stroke-width:3.2;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 0}
.cs-pierna--a{transform:rotate(-9deg)}.cs-pierna--b{transform:rotate(9deg)}
.cs-torso{fill:none;stroke:#f3eadc;stroke-width:6;stroke-linecap:round}
.cs-brazo{fill:none;stroke:#f3eadc;stroke-width:2.6;stroke-linecap:round;transform-origin:0 0}
.cs-mochila{fill:#ff8a2a;stroke:#10281c;stroke-width:1}
.cs-bolsa{fill:#c4560f;stroke:#10281c;stroke-width:1}
.cs-correa{fill:none;stroke:#10281c;stroke-width:1.2;stroke-linecap:round;opacity:.55}
.cs-cara{fill:#f3eadc}
.cs-cabeza{transform-origin:50% 90%}
.cs-gorra{fill:#ffb347}
.cs-visera{fill:none;stroke:#ffb347;stroke-width:2.2;stroke-linecap:round}
.cs-q{fill:var(--brasa-clara);font:800 16px var(--font);text-anchor:middle;transform-box:fill-box;transform-origin:50% 100%}
.cs-q--g{font-size:21px}

@media(prefers-reduced-motion:no-preference){
  .act-llama.is-on[data-escena="organizacion"] .or-tilde{animation:or-tilda .4s ease-out calc(.5s + var(--i) * .7s) both}
  .act-llama.is-on[data-escena="organizacion"] .or-lapiz{animation:or-lapiz 2.1s ease-in-out .2s both}
  @keyframes or-tilda{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
  @keyframes or-lapiz{0%{transform:translate(-50px,-36px)}25%{transform:translate(-56px,-34px)}33%{transform:translate(-50px,-16px)}58%{transform:translate(-56px,-14px)}66%{transform:translate(-50px,4px)}90%{transform:translate(-56px,6px)}100%{transform:none}}
  /* 0 a 1 s: crecen los pinos y aparece la persona; después mira a un lado y al otro, con signos de pregunta que van apareciendo; al final se rasca la cabeza */
  .act-llama.is-on[data-escena="casos"] .cs-pino{animation:cs-crece .6s cubic-bezier(.2,1.2,.4,1) calc(var(--i) * .1s) both}
  .act-llama.is-on[data-escena="casos"] .cs-persona{animation:cs-entra .6s cubic-bezier(.23,1,.32,1) .4s both}
  .act-llama.is-on[data-escena="casos"] .cs-gira{animation:cs-gira 6.8s linear 0s both}
  .act-llama.is-on[data-escena="casos"] .cs-cabeza{animation:cs-mira 6.8s ease-in-out 0s both}
  .act-llama.is-on[data-escena="casos"] .cs-brazo{animation:cs-rasca 6.8s ease-in-out 0s both}
  .act-llama.is-on[data-escena="casos"] .cs-q{animation:cs-duda .5s cubic-bezier(.2,1.4,.4,1) calc(1.1s + var(--i) * 1.1s) both}
  @keyframes cs-crece{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
  @keyframes cs-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes cs-gira{0%{transform:none}21.91%{transform:scaleX(1)}22.06%{transform:scaleX(-1)}39.56%{transform:scaleX(-1)}39.71%{transform:scaleX(1)}57.21%{transform:scaleX(1)}57.35%{transform:scaleX(-1)}71.91%{transform:scaleX(-1)}72.06%{transform:scaleX(1)}100%{transform:scaleX(1)}}
  @keyframes cs-mira{0%{transform:none}13.97%{transform:none}18.38%{transform:rotate(-10deg)}27.21%{transform:rotate(7deg)}32.35%{transform:none}31.62%{transform:none}36.03%{transform:rotate(-10deg)}44.85%{transform:rotate(7deg)}50.00%{transform:none}49.26%{transform:none}53.68%{transform:rotate(-10deg)}62.50%{transform:rotate(7deg)}67.65%{transform:none}63.97%{transform:none}68.38%{transform:rotate(-10deg)}77.21%{transform:rotate(7deg)}82.35%{transform:none}100%{transform:none}}
  @keyframes cs-rasca{0%,77.94%{transform:none}85.29%{transform:rotate(-112deg)}88.24%{transform:rotate(-100deg)}91.18%{transform:rotate(-120deg)}94.12%{transform:rotate(-102deg)}100%{transform:rotate(-110deg)}}
  @keyframes cs-duda{from{opacity:0;transform:translateY(8px) scale(.3)}to{opacity:1;transform:none}}
}

/* Logo de Nómades Aventura (quien dicta el taller) en lugar del sello: entra rodando y después se mece suave, como colgado */
.sv-logo{rotate:0deg;filter:drop-shadow(0 10px 14px rgba(60,40,10,.28))}
.sv-logo img{display:block;width:100%;height:auto;border-radius:50%;box-shadow:0 0 0 3px #fbf3e2,0 0 0 4.5px rgba(125,80,12,.55)}
@media(prefers-reduced-motion:no-preference){
  .sv-logo{transform-origin:50% -10%}
  .sv-cab:has(.act-nombre.is-in) .sv-logo{animation:sv-logo-entra 1.1s cubic-bezier(.2,1.25,.4,1) .35s both,sv-logo-mece 4.8s ease-in-out 1.6s infinite}
  @keyframes sv-logo-entra{from{opacity:0;transform:translateX(60px) rotate(220deg) scale(.6)}to{opacity:1;transform:none}}
  @keyframes sv-logo-mece{0%,100%{transform:rotate(0deg) translateY(0)}25%{transform:rotate(-5deg) translateY(-2px)}75%{transform:rotate(4deg) translateY(1px)}}
  @media(hover:hover) and (pointer:fine){.sv-logo:hover img{animation:sv-logo-gira .9s cubic-bezier(.23,1,.32,1)}@keyframes sv-logo-gira{from{transform:rotate(0)}to{transform:rotate(360deg)}}}
}

/* Fotos de Supervivencia: al aparecer caen y se pegan al tablero (con un pequeño rebote), las cintas se aprietan después y
   quedan quietas. Usan su propio disparador (.sv-pegar → .is-pegada, en
   actividades.js) para que no se peguen antes de verse. */
.act-sv .sv-fotos .foto.sv-pegar{transform-origin:50% 0}
@media(prefers-reduced-motion:no-preference){
  html.js .act-sv .sv-fotos .sv-pegar:not(.is-pegada){opacity:0}
  html.js .act-sv .sv-fotos .sv-pegar:not(.is-pegada) .sv-cinta{opacity:0}
  .act-sv .sv-fotos .sv-pegar.is-pegada{animation:sv-pega .95s cubic-bezier(.2,1.15,.35,1) both}
  .act-sv .sv-fotos .inst-fotos__chica.sv-pegar.is-pegada{animation:sv-pega-chica .95s cubic-bezier(.2,1.15,.35,1) .35s both}
  .act-sv .sv-fotos .sv-pegar.is-pegada .sv-cinta{animation:sv-cinta .35s cubic-bezier(.2,1.3,.4,1) .6s both}
  .act-sv .sv-fotos .inst-fotos__chica.sv-pegar.is-pegada .sv-cinta{animation-delay:.95s}
  @keyframes sv-pega{0%{opacity:0;transform:translateY(-46px) rotate(-7deg) scale(1.1);box-shadow:0 70px 70px -30px rgba(60,40,10,.3)}
    55%{opacity:1;transform:translateY(5px) rotate(1deg) scale(.99)}78%{transform:translateY(-2px) rotate(-.4deg)}100%{opacity:1;transform:none}}
  @keyframes sv-pega-chica{0%{opacity:0;transform:translate(40px,-50px) rotate(12deg) scale(1.12);box-shadow:0 70px 70px -30px rgba(60,40,10,.3)}
    55%{opacity:1;transform:translateY(5px) rotate(-1.2deg) scale(.99)}78%{transform:translateY(-2px) rotate(.5deg)}100%{opacity:1;transform:none}}
  @keyframes sv-cinta{from{opacity:0;scale:1.35}to{opacity:1;scale:1}}
}

/* ---------- Aventura: tres estaciones con foto (3/10/2026, noche) ----------
   Cabecera con el nombre, la frase y una franja de datos, y debajo tres tarjetas, una por
   actividad. Cada foto lleva su propio adorno en el hueco de arriba: agarres de colores sobre el borde de la palestra, la polea que
   llega por el cable y cuelga la foto, y el blanco con la flecha clavada (espejado: el arquero de la foto tira hacia la izquierda). */
.av-cab{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:end;margin-bottom:clamp(10px,1.2vw,18px)}
.av-cab__texto{grid-column:1}
.av-cab .act-datos{grid-column:1;grid-row:2;margin:2px 0 0;gap:8px 32px}
#adrenalina .act-nombre{font-size:clamp(3.4rem,5.4vw,5.2rem)}
#adrenalina .act-lema{margin:6px 0 10px}
.act .posta--bosque .av-cab .act-datos li{min-height:0;padding:0;border:0;border-radius:0;background:none;font-weight:500;font-size:1rem;color:rgba(243,234,220,.92)}
.av-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,40px);margin:0;padding:0;list-style:none}
.av-card{display:flex;flex-direction:column;gap:16px;scroll-margin-top:150px}
.av-card__marco{position:relative;display:flex;flex-direction:column}
.av-deco{display:block;width:100%;height:auto;aspect-ratio:340/64;position:relative;z-index:2;margin-bottom:-2.4%;overflow:hidden;pointer-events:none}
.av-deco--espejo{transform:scaleX(-1)}
.av-foto{position:relative;display:block;aspect-ratio:4/2.65;overflow:hidden;border-radius:16px;border:1px solid rgba(242,186,43,.4);background:var(--tinta-verde);box-shadow:0 20px 44px rgba(0,0,0,.4),0 0 0 6px rgba(243,234,220,.06)}
.av-foto:focus-visible{z-index:3}
.av-foto img{display:block;width:100%;height:100%;object-fit:cover;scale:1;transition:scale .6s var(--ease-fuerte)}
.av-card__pie{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 16px}
.av-ic{grid-row:span 2;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;border:1px solid rgba(242,186,43,.5);background:var(--icono-fondo);color:var(--oro)}
.av-ic .icono-anim{width:34px;height:34px}
.camp-main .av-card__pie .av-nombre{grid-column:2;margin:0;font:600 clamp(2.1rem,2.9vw,2.8rem)/1 var(--serif);letter-spacing:-.02em;color:var(--oro)}
.camp-main .av-card__pie p{grid-column:2;margin:4px 0 0;max-width:30ch;font-size:1.04rem;line-height:1.5}
.av-card__pie div{display:contents}
/* adornos */
.av-polea{fill:rgba(242,186,43,.12);stroke:var(--oro);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.av-polea__eje{fill:var(--oro);stroke:none}
.av-cable{fill:none;stroke:rgba(242,186,43,.75);stroke-width:1.5}
.av-cuerdas path{fill:none;stroke:rgba(243,234,220,.55);stroke-width:1.2;stroke-linecap:round}
.av-trazo path{fill:none;stroke:rgba(243,234,220,.6);stroke-width:1.3;stroke-dasharray:3 4.5;stroke-linecap:round}
@media(hover:hover){
  .av-foto:hover img{scale:1.04}
}
/* cuerda de escalada con mosquetón a la izquierda, colgada del borde de la sección (solo donde hay margen) */
.av-cuerda{position:absolute;z-index:0;top:-4px;left:max(10px,calc((100% - 1360px) / 2));width:clamp(46px,3.8vw,68px);height:auto;transform-origin:50% 0;pointer-events:none;opacity:.9}
.av-cuerda__soga{fill:none;stroke:#e8d9b8;stroke-width:5;stroke-linecap:round}
.av-cuerda__trenza{fill:none;stroke:#9a7a44;stroke-width:5.2;stroke-dasharray:2 4.6;stroke-linecap:butt}
.av-cuerda__nudo{fill:#e8d9b8;stroke:#7a5e2f;stroke-width:1.6}
.av-anclaje{fill:var(--oro);stroke:var(--tinta-verde);stroke-width:1.4}
.av-mosqueton{fill:none;stroke:var(--oro);stroke-width:3.4}
.av-mosqueton__gatillo{fill:none;stroke:var(--tinta-verde);stroke-width:4;stroke-linecap:round}
@media(max-width:1180px){.av-cuerda{display:none}}
/* pantallas bajas de compu (1366×768): fotos más bajas para que las descripciones entren */
@media(min-width:901px) and (max-height:820px){
  .av-foto{aspect-ratio:4/2.35}
  .av-card{gap:10px}
  .camp-main .av-card__pie .av-nombre{font-size:2.2rem}
  .camp-main .av-card__pie p{font-size:.98rem;line-height:1.4}
  .av-cab{margin-bottom:6px}
}
/* celular y tablet: una tarjeta tras otra y el botón al final */
@media(max-width:900px){
  .av-grid{grid-template-columns:1fr;gap:34px;max-width:520px;margin-inline:auto}
  .av-cab{grid-template-columns:1fr}
  .av-cab .act-datos{grid-row:auto;grid-column:auto;gap:8px 22px;margin-top:6px}
  .av-foto{aspect-ratio:4/3}
  .camp-main .av-card__pie .av-nombre{font-size:2.2rem}
  .av-ic{width:54px;height:54px}
}
/* textos largos con zoom al 200 % en pantallas de 320 px */
@media(max-width:340px){
  .camp-main .act-nombre{white-space:normal}
  .av-cab .act-datos li{overflow-wrap:anywhere}
}

@media(prefers-reduced-motion:no-preference){
  /* los agarres saltan al borde uno tras otro; la polea llega por el cable y cuelga la foto; la flecha entra y se clava */
  .av-grid:not(.is-in) .av-agarre,.av-grid:not(.is-in) .av-cuerdas,.av-grid:not(.is-in) .av-polea-g,.av-grid:not(.is-in) .av-flecha,.av-grid:not(.is-in) .av-trazo{opacity:0}
  .av-agarre{transform-box:fill-box;transform-origin:50% 100%}
  .av-grid.is-in .av-agarre{animation:av-agarre .5s cubic-bezier(.2,1.4,.4,1) calc(.35s + var(--i) * .09s) both}
  .av-grid.is-in .av-polea-g{animation:av-llega 1.1s cubic-bezier(.3,.7,.2,1) .5s both}
  .av-grid.is-in .av-cuerdas{animation:av-cuelga .5s ease-out 1.5s both}
  .av-grid.is-in .av-flecha{animation:av-flecha .4s cubic-bezier(.2,.9,.25,1) 1s both}
  .av-grid.is-in .av-trazo{animation:av-trazo .7s ease-out .35s both}
  .av-grid.is-in .av-blanco{animation:av-golpe .7s ease-out 1.2s both;transform-box:fill-box;transform-origin:50% 100%}
  /* la cuerda baja al cargar y se mece unas pocas veces; después queda quieta */
  .av-cuerda{animation:av-cuerda-baja 1.1s cubic-bezier(.23,1,.32,1) .2s both,av-cuerda-mece 5.5s ease-in-out 1.4s 3}
  @keyframes av-cuerda-baja{from{opacity:0;transform:translateY(-60px)}to{opacity:.9;transform:none}}
  @keyframes av-cuerda-mece{0%,100%{rotate:0deg}50%{rotate:2.2deg}}
  @keyframes av-agarre{from{opacity:0;transform:scale(.3) translateY(8px)}to{opacity:1;transform:none}}
  @keyframes av-llega{from{opacity:0;transform:translate(-130px,-8px)}12%{opacity:1}to{opacity:1;transform:none}}
  @keyframes av-cuelga{from{opacity:0}to{opacity:1}}
  @keyframes av-flecha{from{opacity:0;transform:translateX(-170px) translateY(-14px)}30%{opacity:1}to{opacity:1;transform:none}}
  @keyframes av-trazo{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes av-golpe{0%,100%{transform:none}20%{transform:rotate(-5deg)}45%{transform:rotate(3.5deg)}70%{transform:rotate(-1.5deg)}}
}

/* Con el mapa en el lateral (desde 1340 px) ya no hay barra pegajosa: el enlace deja la sección justo debajo de la cabecera
   (la página tiene scroll-padding-top de 170 px). */
@media(min-width:1340px){.camp-main .act-p[id]{scroll-margin-top:-78px}}

/* ---------- 3 · Exploradores: el sendero (7/10/2026) ----------
   Arriba, el nombre con la frase y los datos, y al lado Poli Pignataro, el guía, en un retrato redondo con aro dorado, con
   "Para llevar" debajo. Abajo, un sendero de puntos que cruza la sección y se dibuja de izquierda a derecha con huellas de
   animal; tiene tres paradas con su ícono, foto, nombre y una línea: Exploramos (Poli con un grupo), Observamos (el lechuzón
   orejudo con la ardilla en una lente chica) y Conectamos (el abrazo al árbol). Cada parada aparece cuando el sendero llega
   a ella. En el celular el sendero baja en vertical por la izquierda. Sin JS o con movimiento reducido se ve todo quieto.
   La versión anterior (visor de prismáticos) quedó en backups/auto/actividades_EXPLORADORES-VISOR.*. */
.act-ex .act-aves{height:62px;inset:12px 0 auto}
@media(min-width:901px){
  .act-p.act-ex{padding-bottom:clamp(40px,3.4vw,56px)}
  .act-ex .act-nombre{font-size:clamp(3.2rem,5.4vw,5.6rem)}
  .act-ex .act-lema{margin:8px 0 12px}
  .act-ex .act-que{margin-bottom:14px}
}

/* Cabecera: texto a la izquierda, el guía y qué llevar a la derecha */
.ex-cab{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:end;margin-bottom:clamp(14px,1.6vw,26px)}
.ex-cab .act-datos{margin-bottom:0}
.ex-cab__lado{display:grid;gap:22px;justify-items:start;padding-bottom:4px}
.ex-guia{display:flex;align-items:center;gap:20px}
.ex-guia__foto{position:relative;display:block;flex:none;width:124px;height:124px;border-radius:50%;padding:7px;
  box-shadow:0 22px 34px -22px rgba(80,38,8,.75)}
.ex-guia__foto img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:58% 46%;transition:scale .5s cubic-bezier(.16,1,.3,1)}
.ex-guia__foto{overflow:hidden;background:#fbf3e3}
.ex-guia__aro{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg;fill:none;stroke:var(--oro);stroke-width:2.6;stroke-linecap:round;pointer-events:none}
.ex-guia__aro circle{stroke-dasharray:1;stroke-dashoffset:0}
.ex-guia__foto:focus-visible{outline:3px solid var(--acento);outline-offset:4px}
@media(hover:hover){.ex-guia__foto:hover img{scale:1.06}}
.camp-main .ex-guia__txt{display:grid;gap:4px;margin:0;max-width:none}
.ex-guia__nombre{font:600 clamp(2rem,2.6vw,2.6rem)/1 var(--serif);letter-spacing:-.015em;color:var(--titulo)}
.ex-guia__rol{font:italic 500 1.25rem/1.2 var(--serif);color:var(--acento)}

/* Para llevar, en una línea */
.ex-llevar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-top:16px;border-top:1px solid var(--linea);text-align:left;align-self:stretch}
.camp-main .ex-llevar__tit{margin:0;font:italic 600 1.35rem/1 var(--serif);letter-spacing:0;color:var(--acento)}
.ex-llevar ul{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.ex-llevar li{display:inline-flex;align-items:center;gap:8px;font-size:1rem;font-weight:500;color:var(--titulo)}
.ex-llevar svg{flex:none;width:21px;height:21px;color:var(--acento)}

/* El sendero: una onda de puntos con huellas, y las tres paradas colgadas de él */
.ex-sendero{position:relative}
.ex-camino{position:absolute;left:0;right:0;top:0;height:80px;pointer-events:none}
.ex-camino__linea{display:block;width:100%;height:80px;overflow:visible;fill:none;stroke:rgba(143,67,18,.55);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.1 11;vector-effect:non-scaling-stroke}
.ex-camino__linea path{vector-effect:non-scaling-stroke}
.ex-camino i{position:absolute;width:14px;height:15px;margin:-7px 0 0 -7px;rotate:var(--r);color:#8f4312;opacity:.3}
.ex-camino i svg{display:block;width:100%;height:100%;fill:currentColor}
.ex-paradas{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,40px);margin:0;padding:0;list-style:none}
.ex-parada{display:grid;justify-items:center;align-content:start;text-align:center}
.ex-paso__ic{position:relative;z-index:1;display:grid;place-items:center;width:62px;height:62px;margin:9px 0 16px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#2a5c40,#10281c 72%);
  box-shadow:0 0 0 1px rgba(242,186,43,.6),0 0 0 6px #f6e5d3,0 14px 22px -14px rgba(16,40,28,.8)}
.ex-paso__ic svg{width:36px;height:36px;fill:none;stroke:#f4c531;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ex-huellas__pie,.ex-brote__hoja,.ex-prismaticos__cuerpo{transform-box:view-box}
.ex-prismaticos__cuerpo{transform-origin:24px 30px}
.ex-brote__hoja--izq{transform-origin:24px 30px}.ex-brote__hoja--der{transform-origin:24px 24px}
.ex-brote__tallo{stroke-dasharray:1}

.ex-foto{position:relative;display:block;width:100%;aspect-ratio:16/9.2;border-radius:18px;overflow:hidden;background:#e9d9c4;box-shadow:0 26px 40px -28px rgba(80,38,8,.75)}
.ex-foto::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(143,67,18,.22);pointer-events:none}
.ex-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.16,1,.3,1)}
.ex-foto:focus-visible{outline:3px solid var(--acento);outline-offset:4px}
@media(hover:hover){.ex-foto:hover img{scale:1.04}}
.ex-fotos{position:relative;width:100%}
.ex-foto.ex-foto--chica{position:absolute;right:-12px;bottom:-16px;width:30%;aspect-ratio:1;border-radius:50%;border:5px solid #fbf3e3;box-shadow:0 14px 24px -14px rgba(80,38,8,.8)}
.ex-foto--chica::after{display:none}
.camp-main .ex-parada__nombre{margin:16px 0 6px;font:600 clamp(1.7rem,2.1vw,2.1rem)/1 var(--serif);letter-spacing:-.01em;color:var(--titulo)}
.camp-main .ex-parada__txt{margin:0;max-width:30ch;font-size:1rem;line-height:1.5;color:var(--texto);text-wrap:pretty}

@media(prefers-reduced-motion:no-preference){
  /* El retrato de Poli: el aro dorado se dibuja y la foto se acerca apenas */
  html.js .ex-guia.reveal:not(.is-in) .ex-guia__aro circle{stroke-dashoffset:1}
  .ex-guia.reveal.is-in .ex-guia__aro circle{transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1) .3s}

  /* El sendero se dibuja (2,4 s); las huellas se marcan a su paso y cada parada aparece cuando llega la línea */
  html.js .ex-sendero:not(.is-in) .ex-camino__linea{clip-path:inset(0 100% 0 0)}
  .ex-sendero.is-in .ex-camino__linea{clip-path:inset(0 0 0 0);transition:clip-path 2.4s cubic-bezier(.45,0,.55,1) .1s}
  html.js .ex-sendero:not(.is-in) .ex-camino i{opacity:0}
  .ex-sendero.is-in .ex-camino i{animation:ex-marca .7s ease-out calc(.75s + var(--k) * .17s) both}
  html.js .ex-sendero:not(.is-in) .ex-paso__ic{opacity:0;scale:.5}
  html.js .ex-sendero:not(.is-in) .ex-parada > :not(.ex-paso__ic){opacity:0;translate:0 18px}
  .ex-sendero.is-in .ex-paso__ic{transition:opacity .3s ease var(--d),scale .55s cubic-bezier(.3,1.5,.5,1) var(--d)}
  .ex-sendero.is-in .ex-parada > :not(.ex-paso__ic){transition:opacity .6s ease calc(var(--d) + .15s),translate .8s cubic-bezier(.16,1,.3,1) calc(var(--d) + .15s)}
  .ex-sendero.is-in .ex-parada > .ex-parada__txt{transition-delay:calc(var(--d) + .3s)}
  .ex-parada:nth-child(1){--d:.35s}.ex-parada:nth-child(2){--d:1.2s}.ex-parada:nth-child(3){--d:2.05s}
  html.js .ex-sendero:not(.is-in) .ex-foto--chica{scale:.4}
  .ex-sendero.is-in .ex-foto--chica{transition:scale .55s cubic-bezier(.3,1.5,.5,1) 1.9s}

  /* Los íconos: dos huellas que pisan, prismáticos que barren y un brote que crece; se repiten al pasar el puntero */
  .ex-sendero.is-in .ex-huellas__pie{animation:ex-pie .5s cubic-bezier(.3,1.4,.5,1) .55s both}
  .ex-sendero.is-in .ex-huellas__pie:nth-child(2){animation-delay:.85s}
  .ex-sendero.is-in .ex-prismaticos__cuerpo{animation:ex-barre 1.6s ease-in-out 1.45s both}
  .ex-sendero.is-in .ex-prismaticos__brillo{animation:ex-brillo 1.6s ease-out 1.45s both}
  .ex-sendero.is-in .ex-brote__tallo{animation:ex-tallo .7s cubic-bezier(.65,0,.35,1) 2.25s both}
  .ex-sendero.is-in .ex-brote__hoja{animation:ex-hoja .6s cubic-bezier(.3,1.5,.5,1) 2.75s both}
  .ex-sendero.is-in .ex-brote__hoja--der{animation-delay:2.95s}
  @media(hover:hover){
    .ex-parada:hover .ex-huellas__pie{animation:ex-pie-b .5s cubic-bezier(.3,1.4,.5,1) both}
    .ex-parada:hover .ex-huellas__pie:nth-child(2){animation-delay:.2s}
    .ex-parada:hover .ex-prismaticos__cuerpo{animation:ex-barre-b 1.2s ease-in-out both}
    .ex-parada:hover .ex-brote__hoja{animation:ex-hoja-b .6s cubic-bezier(.3,1.5,.5,1) both}
  }
  @keyframes ex-marca{0%{opacity:0;scale:.4}35%{opacity:.95;scale:1.25}100%{opacity:.3;scale:1}}
  @keyframes ex-pie{from{opacity:0;translate:0 7px;scale:.55}to{opacity:1;translate:0 0;scale:1}}
  @keyframes ex-pie-b{from{opacity:0;translate:0 7px;scale:.55}to{opacity:1;translate:0 0;scale:1}}
  @keyframes ex-barre{0%,100%{rotate:0deg}30%{rotate:-11deg}65%{rotate:9deg}}
  @keyframes ex-barre-b{0%,100%{rotate:0deg}30%{rotate:-11deg}65%{rotate:9deg}}
  @keyframes ex-brillo{0%,100%{opacity:1}60%{opacity:.15}80%{opacity:1;stroke:#fff6d6}}
  @keyframes ex-tallo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes ex-hoja{from{scale:0;opacity:0}to{scale:1;opacity:1}}
  @keyframes ex-hoja-b{from{scale:.2}to{scale:1}}
}

/* Pantallas de compu bajas: todo un poco más compacto para que entre en una pantalla */
@media(min-width:901px) and (max-height:820px){
  .ex-cab{margin-bottom:18px}
  .ex-guia__foto{width:104px;height:104px;padding:6px}
  .ex-cab__lado{gap:16px}
  .ex-llevar{padding-top:12px}
  .ex-paso__ic{width:56px;height:56px;margin:12px 0 12px}
  .ex-foto{aspect-ratio:16/8.4}
  .act-ex .act-nombre{font-size:clamp(3rem,5vw,5rem)}
  .camp-main .ex-parada__nombre{margin-top:12px;font-size:1.7rem}
  .camp-main .ex-parada__txt{font-size:.97rem;line-height:1.45}
}
@media(max-width:1100px) and (min-width:901px){
  .ex-cab{grid-template-columns:1fr 1fr;gap:36px}
  .ex-guia__foto{width:104px;height:104px}
}

/* Celular y tablet: cabecera apilada y el sendero baja por la izquierda */
@media(max-width:900px){
  .ex-cab{grid-template-columns:1fr;gap:26px;align-items:start;margin-bottom:34px}
  .ex-cab .act-nombre{white-space:normal}
  .ex-paradas{grid-template-columns:1fr;gap:34px}
  .ex-camino{display:none}
  .ex-paradas::before{content:"";position:absolute;left:30px;top:40px;bottom:40px;width:2px;
    background:radial-gradient(circle,rgba(143,67,18,.55) 1.3px,transparent 1.8px) 50% 0/2px 11px repeat-y}
  .ex-parada{grid-template-columns:62px minmax(0,1fr);column-gap:16px;justify-items:start;text-align:left}
  .ex-parada .ex-paso__ic{grid-row:1/span 3;align-self:start;margin:0}
  .ex-parada > .ex-foto,.ex-parada > .ex-fotos{grid-column:2;grid-row:3}
  .camp-main .ex-parada__nombre{grid-column:2;grid-row:1;margin:12px 0 4px;font-size:1.75rem}
  .camp-main .ex-parada__txt{grid-column:2;grid-row:2;margin-bottom:14px;max-width:none}
  .ex-foto{aspect-ratio:4/3}
  .ex-foto.ex-foto--chica{right:-6px;bottom:-12px;width:34%}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  html.js .ex-sendero:not(.is-in) .ex-paradas::before{clip-path:inset(0 0 100% 0)}
  .ex-sendero.is-in .ex-paradas::before{clip-path:inset(0);transition:clip-path 2.4s cubic-bezier(.45,0,.55,1) .1s}
}
@media(max-width:760px){
  .act-ex .act-aves{display:none}
  .ex-guia{gap:16px}
  .ex-guia__foto{width:96px;height:96px;padding:5px}
  .ex-guia__nombre{font-size:1.9rem}
  .ex-llevar{gap:12px 18px}
  .ex-llevar__tit{flex-basis:100%}
  .ex-llevar ul{gap:10px 18px}
}


/* ---------- Encuadre al saltar a cada actividad (12/10/2026, ADR-035) ----------
   --tapa es lo que ocupan las barras fijas de arriba: la cabecera flotante y, debajo de 1340 px, la barra de actividades.
   Al saltar a una sección (mapa, menú o enlace con #), su borde de arriba queda justo debajo de las barras; la onda del
   terreno anterior se esconde 14 px detrás. En la compu, actividades.js achica un poco la sección si no entra en la pantalla
   (también cuando se cambia el zoom del navegador). La Lujaneada en la compu llega pegada al borde: su escena mide el alto
   de la pantalla y la cabecera pasa por encima del cielo (recorrido3d.css). */
.camp-main.act{--tapa:132px}
@media(min-width:761px){.camp-main.act{--tapa:160px}}
@media(min-width:1340px){.camp-main.act{--tapa:88px}}
.camp-main .act-p[id],.camp-main #fogon{scroll-margin-top:calc(var(--tapa) - 14px - var(--anchor-offset,170px))}
/* Incluidas entre 901 y 1100 px: las cuatro tarjetas en 2 × 2 (en una sola columna no entraban en la pantalla) */
@media(min-width:901px) and (max-width:1100px){
  .act .inst-vest .mojones{grid-template-columns:1fr 1fr;gap:14px}
  .act .inst-vest .mojones li{gap:4px 14px;padding:18px}
  .act .inst-vest .mojon{width:46px;height:46px}
  .act .inst-vest .icono-anim{width:26px;height:26px}
}