/* ==========================================================================
   Apex · portal entre páginas (inicio ⇄ servicios) — lo conduce portal.js
   La cordillera se cierra sobre la página: el cielo baja, la montaña sube y
   se encuentran en la cresta; la cresta se traza y el marcador cae en el pico.
   Ese cuadro es el primer cuadro de la página de llegada, que abre la
   cordillera y manda la cresta al logo de la navegación.
   OJO: el marcado del portal está escrito igual en servicios.html y en
   portal.js (MARKUP). Si cambia uno, cambia el otro.
   ========================================================================== */

/* navegadores con View Transitions entre documentos funden los dos cuadros,
   que son idénticos: el cambio de página no se ve */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 0.3s; }

.gate {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  overflow: hidden;
  touch-action: none;
}
.gate-on .gate, .gate.is-live { display: block; }
.gate__land, .gate__crest {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.gate__s0 { stop-color: oklch(9% 0.025 262); }
.gate__s1 { stop-color: oklch(12% 0.035 262); }
.gate__s2 { stop-color: oklch(16% 0.045 264); }
.gate__mtn { fill: oklch(7.5% 0.022 262); }
.gate__line {
  fill: none; stroke: oklch(97% 0.008 250);
  stroke-width: var(--gate-sw, 1);
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1.05;
}
.gate__apex { fill: oklch(63% 0.21 35); }
/* el escalador sube la cresta y se apaga cuando el marcador cae en el pico */
.gate__climber { fill: oklch(72% 0.18 38); r: calc(var(--gate-sw, 1) * 1.9); opacity: 0; }
.gate__ring {
  fill: none; stroke: oklch(72% 0.18 38);
  stroke-width: calc(var(--gate-sw, 1) * 0.55);
  opacity: 0;
}
.gate__grain {
  position: absolute; inset: 0; opacity: 0.045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* visita directa (sin venir del portal): la cresta todavía no está trazada */
.gate-draw .gate__line { stroke-dashoffset: 1.05; }
.gate-draw .gate__apex { opacity: 0; }
.gate-draw .gate__climber { opacity: 0; }

/* el logo real espera a que la cresta aterrice sobre él */
.gate-on .nav .brand__mark { opacity: 0; }

/* ==========================================================================
   Más portales (portal-fx.js)
   ========================================================================== */
/* topo · Quiénes somos: curvas de nivel del Ávila */
.topo { position: fixed; inset: 0; z-index: 200; display: none; overflow: hidden; touch-action: none; }
.topo-on .topo, .topo.is-live { display: block; }
.topo__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.topo__bg { fill: oklch(7.5% 0.022 262); }
.topo__band { stroke: oklch(100% 0 0 / 0.15); stroke-width: 1; vector-effect: non-scaling-stroke; }
.topo__band.is-index { stroke: oklch(100% 0 0 / 0.38); stroke-width: 1.5; }
.topo__apex { fill: oklch(63% 0.21 35); }
.topo__ring { fill: none; stroke: oklch(72% 0.18 38); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; }

/* amanecer · Contacto: el fondo de contacto.html es este mismo cuadro */
.dawn { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.dawn--fx { z-index: 200; display: none; touch-action: none; pointer-events: auto; }
.dawn--fx.is-live { display: block; }
.dawn__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #2A1B48 0%, #7A2E3C 45%, #E0703A 78%, #F6C27A 100%); }
.dawn__land { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dawn__disc { fill: #FFF4DA; }
.dawn__mtn { fill: oklch(17% 0.06 322); }
.dawn__line { fill: none; stroke: #F6C27A; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.dawn__apex { fill: oklch(63% 0.21 35); }