/* =============================================
   ALL ENDURO TEXCOCO — Pulido global (polish.css)
   Orden de carga: styles.css → polish.css → hero-capas.css → ruta3d.css → ig-wall.css
   Contiene: tokens de tipografía y espaciado, ritmo vertical, animaciones de
   texto (palabras y tipeo), nav, servicios, divisores, competencias, nosotros,
   CTA, footer, foco visible y reduced-motion.
   ============================================= */

/* --- Tokens (no se tocan colores ni fuentes) --- */
:root {
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-trail: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --step-2:  clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --step-3:  clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
  --step-4:  clamp(3.5rem, 2rem + 8vw, 9rem);
  --tech-xs: 0.62rem;
  --tech-sm: 0.7rem;

  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem;
  --space-6: clamp(5rem, 4rem + 4vw, 8rem);
  --space-7: clamp(7rem, 5rem + 8vw, 12rem);

  --w-narrow: 620px; --w-content: 1100px; --w-wide: 1300px;
}

/* --- Ritmo vertical y anchos --- */
body { line-height: 1.65; }
.section { max-width: var(--w-content); padding-inline: 2rem; }
.services .section { padding-block: 0; }
.routes { padding-block: var(--space-7); }
.services, .competitions, .about, .cta-banner { padding-block: var(--space-6); }
.footer { padding: 0 2rem 2rem; border-top: 0; }

.section__label { font-size: var(--tech-sm); line-height: 1.4; }
.section__title { font-size: var(--step-3); line-height: 0.92; }
.section__desc { font-size: var(--step-0); max-width: var(--w-narrow); margin-inline: auto; line-height: 1.65; }
.routes__header, .competitions__header { max-width: var(--w-narrow); margin-inline: auto; }
.service-card__title { font-size: var(--step-1); line-height: 0.92; }
.timeline__title { font-size: var(--step-2); line-height: 0.92; }
.route-card__name { font-size: var(--step-2); line-height: 0.92; }
.about__quote { line-height: 1.08; }
.footer__desc, .footer__link { font-size: var(--step--1); }

section[id], footer { scroll-margin-top: 5rem; }

/* --- Foco visible y targets --- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.nav__burger { width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; }
.nav__links.open a { display: flex; align-items: center; min-height: 44px; padding-block: 0.25rem; }

/* --- Nav: ocultar al bajar, enlace activo --- */
.nav {
  transition: background 0.5s ease, backdrop-filter 0.5s ease, transform 0.3s var(--ease-inout);
  will-change: transform;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__links a[aria-current="true"] { color: var(--text-primary); }
.nav__links a[aria-current="true"]::after { width: 100%; }

/* --- Texto accesible --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Texto por palabras (.w) y tipeo (.tc) --- */
.w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.08em 0.04em 0.12em; margin: -0.08em -0.04em -0.12em;
}
.w__in { display: inline-block; will-change: transform; }
.tc { position: relative; }
.tc.cur::after {
  content: '|'; position: absolute; left: 100%; top: 0; visibility: visible;
  animation: polishBlink 1s steps(2, start) infinite;
}
@keyframes polishBlink { to { visibility: hidden; } }

/* Estados de entrada solo cuando hay movimiento permitido */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-anim="words"]:not(.is-split),
  html.js [data-anim="type"]:not(.is-split) { visibility: hidden; }
  .w__in { transform: translateY(110%); transition: transform 0.6s var(--ease-out); }
  .is-in .w__in { transform: translateY(0); }
  .w--em .w__in { transform: translateY(110%) scaleX(1.06); transform-origin: left center; }
  .is-in .w--em .w__in { transform: translateY(0) scaleX(1); }
  .tc { visibility: hidden; }
  .tc.on { visibility: visible; }
  html.js .service-card__text { opacity: 0; transition: opacity 0.4s ease; }
  .service-card.is-in .service-card__text { opacity: 1; transition-delay: 1.1s; }
}

/* --- Servicios: número, fondo de capa real, sin ícono en círculo --- */
.service-card { padding-top: 3.25rem; }
.service-card__icon { display: none; }
.service-card__num {
  position: absolute; top: 1.1rem; left: 1.25rem; z-index: 1;
  font-family: var(--font-tech); font-size: var(--tech-sm); letter-spacing: 3px;
  color: var(--accent); opacity: 0.85; line-height: 1.4;
}
.service-card__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center bottom;
  opacity: 0; filter: saturate(0.4);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
          mask-image: linear-gradient(to top, #000, transparent 70%);
  transform: translate(var(--bg-x, 0px), var(--bg-y, 0px)) scale(1.08);
  transition: opacity 0.7s ease, transform 0.4s var(--ease-trail);
  pointer-events: none;
}
.service-card.is-in .service-card__bg { opacity: 0.18; }
.service-card__title, .service-card__text { position: relative; z-index: 1; }

/* --- Divisores con silueta de capa real --- */
.divider { position: relative; height: 140px; overflow: hidden; pointer-events: none; }
.divider::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-position: center top; mask-position: center top;
}
.divider--ridge { background: var(--bg-surface); }
.divider--ridge::after {
  background: var(--bg-deep);
  -webkit-mask-image: url('assets/capas/c04-cordillera.webp'); mask-image: url('assets/capas/c04-cordillera.webp');
}
.divider--forest { background: var(--bg-deep); }
.divider--forest::after {
  background: var(--bg-surface);
  -webkit-mask-image: url('assets/capas/c07-colinas.webp'); mask-image: url('assets/capas/c07-colinas.webp');
}
/* Móvil: la máscara escala por alto para que la silueta llene la banda (con cover solo asomaría el cielo) */
@media (max-width: 768px) {
  .divider { height: 110px; }
  .divider::after { -webkit-mask-size: auto 100%; mask-size: auto 100%; }
}

/* --- Competencias: línea que se dibuja, puntos que se encienden, año sticky --- */
.competitions { overflow: clip; }
html.js .timeline::before { transform: scaleY(var(--tl-progress, 0)); transform-origin: top; will-change: transform; }
.timeline__item::before { transition: background 0.4s ease, box-shadow 0.4s ease; }
.timeline__item.is-lit::before { background: var(--accent); box-shadow: 0 0 20px var(--accent-glow); }
html.js .timeline__badge { transform: scale(0.9); opacity: 0; transition: transform 0.3s var(--ease-out), opacity 0.3s ease; }
.timeline__item.is-lit .timeline__badge { transform: scale(1); opacity: 1; }
.timeline__item.is-lit .timeline__badge + .timeline__badge { transition-delay: 60ms; }
.timeline__year {
  position: sticky; top: 30vh; display: block; height: 0; width: max-content;
  transform: translateX(calc(-100% - 5rem));
  font-family: var(--font-display); font-size: 6rem; line-height: 0.8; letter-spacing: 4px;
  color: transparent; -webkit-text-stroke: 1px rgba(74,222,38,0.15);
  pointer-events: none; user-select: none; transition: opacity 0.3s ease;
}
@media (max-width: 1100px) { .timeline__year { display: none; } }

/* --- Nosotros: hillshade real de fondo, etiqueta, texto sin translate --- */
.about::before {
  content: ''; position: absolute; inset: 0;
  background: url('assets/geo/hillshade.jpg') center / cover no-repeat;
  opacity: 0.07; mix-blend-mode: screen; pointer-events: none;
}
@media (pointer: fine) and (min-width: 769px) { .about::before { background-attachment: fixed; } }
.about__inner { position: relative; }
.about__text.reveal { transform: none; transition: opacity 0.5s ease 0.15s; }
.about__tag {
  display: inline-block;
  font-family: var(--font-tech); font-size: var(--tech-sm); letter-spacing: 3px;
  color: var(--accent); line-height: 1.4;
}

/* --- CTA: banda KEEP THE FLOW, huella de llanta, botón secundario --- */
.cta-banner__flow {
  display: flex; justify-content: center; gap: 0.35em;
  margin-bottom: var(--space-3);
  font-family: var(--font-display); font-size: clamp(4rem, 14vw, 12rem); line-height: 0.9;
  letter-spacing: 0.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--accent);
  pointer-events: none; user-select: none; will-change: transform;
}
.cta-banner__flow span { flex: 0 0 auto; transition: color 0.5s ease; }
.cta-banner__flow span.is-filled { color: var(--accent); }
.cta-banner__track {
  height: 2px; width: 140%; margin: 0 -20% var(--space-5);
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 14px);
  opacity: 0.5; will-change: transform;
}
.cta-banner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; position: relative; }
.cta-banner__btn { min-height: 44px; }
.cta-banner__btn--outline {
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px;
  padding: 1rem 2.5rem; border: 1px solid var(--accent); border-radius: 4px;
  background: transparent; color: var(--accent);
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 2px; text-transform: uppercase; transition: var(--transition);
}
.cta-banner__btn--outline:hover { background: var(--accent); color: var(--bg-deep); box-shadow: 0 0 40px var(--accent-glow); }
.cta-banner__btn--outline svg { width: 18px; height: 18px; }

/* --- Footer: perfil de elevación como borde --- */
.footer__profile { display: block; width: 100%; height: 48px; margin-bottom: var(--space-4); overflow: visible; }
.footer__profile polyline { fill: none; stroke: rgba(74,222,38,0.25); stroke-width: 1.5; stroke-linejoin: round; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .w__in, .w--em .w__in { transform: none !important; transition: none !important; }
  .tc { visibility: visible !important; }
  .tc.cur::after { display: none; }
  .nav.is-hidden { transform: none; }
  .timeline::before { transform: none; }
  .timeline__item::before { background: var(--accent); box-shadow: 0 0 20px var(--accent-glow); }
  .timeline__badge { transform: none; opacity: 1; }
  .service-card__bg { opacity: 0.18; transform: none; }
  .service-card__text { opacity: 1; }
  .cta-banner__flow, .cta-banner__track { transform: none !important; }
  .cta-banner__flow span { color: var(--accent); }
  .footer__profile polyline { stroke-dashoffset: 0 !important; }
  .about::before { background-attachment: scroll; }
}