/* ponytail: fuentes recortadas a los pesos que se usan (Montserrat 700-800, Inter 400-600, Caveat 600) y a Latin-1.
   Si se usa otro peso u otro alfabeto, hay que regenerarlas desde @fontsource-variable con fontTools. */
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-700-800.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400-600.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

/* Reservas con las medidas de Montserrat 800 e Inter 400 (calculadas con fontTools frente a Arial):
   mientras llega la fuente buena el texto ocupa lo mismo, así que nada salta al cambiar (CLS 0). */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); font-weight: 700 800; size-adjust: 111.07%; ascent-override: 87.15%; descent-override: 22.6%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); font-weight: 400 600; size-adjust: 105.94%; ascent-override: 91.45%; descent-override: 22.77%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --night: #06110e;
  --ground: #0a1f1a;
  --slate: #1a1f24;
  --line: rgb(255 255 255 / 0.09);
  --mist: #a0a6ad;
  --snow: #ffffff;
  --text: #e4eae8;
  --green: #00e676;
  --amber: #ffb347;
  --ember: #ff7a59;
  --display: "Montserrat", "Montserrat Fallback", system-ui, sans-serif;
  --body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --script: "Caveat", cursive;
  --r: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(72px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; scrollbar-color: #2b3b36 var(--night); }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 1rem/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--display); color: var(--snow); text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
em { font-style: normal; color: var(--green); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--green); color: var(--ground); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 8px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.eyebrow { margin-bottom: 1.1rem; font: 700 0.74rem/1.2 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); }
@media (max-width: 359px) { .eyebrow { letter-spacing: 0.12em; } }
.script { padding: 0.15em 0.4em 0.2em 0; font-family: var(--script); font-weight: 600; line-height: 0.95; color: var(--snow); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0 1.6em; border-radius: 999px;
  background: var(--green); color: var(--ground);
  font: 700 0.95rem/1 var(--display); white-space: nowrap;
  box-shadow: 0 12px 24px -14px rgb(0 230 118 / 0.6);
  transition: transform 0.4s var(--ease), background-color 0.25s, box-shadow 0.4s var(--ease);
}
.btn .i { transition: transform 0.4s var(--ease); }
.btn:hover { background: #3ff296; transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgb(0 230 118 / 0.7); }
.btn:hover .i:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--ghost { background: rgb(6 17 14 / 0.3); color: var(--snow); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.8); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1.5px #fff; }
.btn--sm { min-height: 40px; padding: 0 1.3em; font-size: 0.875rem; }
.btn--lg { min-height: 60px; padding: 0 2.1em; font-size: 1.05rem; }
.btn--lg .i { width: 1.35em; height: 1.35em; }

/* Navegación */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; transition: background-color 0.4s, box-shadow 0.4s; }
.nav.is-solid { background: rgb(6 17 14 / 0.8); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 var(--line); }
.nav__inner { display: flex; align-items: center; gap: 2rem; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font: 800 1.1rem/1 var(--display); letter-spacing: 0.16em; color: var(--snow); }
.brand__mark { width: 36px; height: 24px; }
.nav__links { display: flex; gap: 2rem; margin-inline: auto; font-size: 0.875rem; font-weight: 500; }
.nav__links a { position: relative; padding: 0.5rem 0; color: rgb(255 255 255 / 0.82); transition: color 0.2s; }
.nav__links a::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; border-radius: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__toggle { display: none; place-items: center; width: 44px; height: 44px; margin-left: auto; border-radius: 12px; font-size: 1.5rem; }

.menu {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0;
  border: 0; padding: 96px var(--gutter) 40px;
  flex-direction: column; align-items: flex-start; gap: 0.2rem;
  background: rgb(6 17 14 / 0.97); color: var(--snow);
  opacity: 0; translate: 0 -12px;
  transition: opacity 0.35s, translate 0.5s var(--ease), display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}
.menu:popover-open { display: flex; opacity: 1; translate: 0 0; }
@starting-style { .menu:popover-open { opacity: 0; translate: 0 -12px; } }
.menu a:not(.btn) { padding: 0.25rem 0; font: 800 clamp(1.9rem, 8vw, 2.6rem)/1.25 var(--display); letter-spacing: -0.02em; }
.menu .btn { margin-top: 2rem; }
.menu__close { position: absolute; top: 14px; right: var(--gutter); display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.5rem; }

@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
}

/* Portada */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 100svh; overflow: hidden; background: var(--night); }
.hero__slides { position: absolute; inset: 0; z-index: -1; }
.hero__slides::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(6 17 14 / 0.85) 0%, rgb(6 17 14 / 0.5) 38%, rgb(6 17 14 / 0) 68%),
    linear-gradient(180deg, rgb(6 17 14 / 0.6) 0%, transparent 20%, transparent 60%, var(--ground) 100%);
}
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.hero__slide:first-child { scale: -1 1; object-position: 42% 50%; }
.hero__slide.is-active { opacity: 1; }
.hero__content { padding-block: 120px 110px; }
.hero__title { margin-bottom: 1.4rem; font-size: clamp(2rem, min(11.3vw - 0.3rem, 1.1rem + 5.4vw), 5.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.hero__title .nowrap { display: block; }
.hero__lead { max-width: 34ch; margin-bottom: 2.3rem; font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); color: rgb(255 255 255 / 0.88); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__pager { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; display: grid; gap: 0.9rem; justify-items: center; }
.hero__pager button { display: grid; justify-items: center; gap: 0.7rem; min-width: 44px; padding: 0.3rem; font: 700 0.8rem/1 var(--display); letter-spacing: 0.08em; color: rgb(255 255 255 / 0.45); transition: color 0.3s; }
.hero__pager button:hover, .hero__pager button[aria-pressed="true"] { color: #fff; }
.hero__pager button::after { content: ""; width: 2px; height: 0; border-radius: 2px; background: linear-gradient(var(--green), var(--green)) top / 100% var(--fill, 100%) no-repeat, rgb(255 255 255 / 0.25); }
.hero__pager button[aria-pressed="true"]::after { height: 64px; }

/* Quiénes somos */
.about { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(40px, 7vw, 110px); padding-block: var(--section); }
.about__text h2 { margin-bottom: 0.4rem; }
.about__text p:not(.eyebrow) { max-width: 52ch; margin-top: 1.1rem; font-size: 1.05rem; color: var(--mist); }
.about__media { position: relative; margin: 0; }
.about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 65% 50%; border-radius: var(--r); box-shadow: 0 34px 60px -34px rgb(0 0 0 / 0.8); }
.about__script { position: absolute; left: clamp(18px, 5%, 36px); bottom: clamp(16px, 6%, 34px); font-size: clamp(2.2rem, 1.5rem + 2vw, 3.2rem); rotate: -6deg; text-shadow: 0 2px 14px rgb(0 0 0 / 0.55); }
.doodle { width: 76px; height: auto; margin: 0.2rem 0 0 45%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Calendario */
/* Debajo viene la foto de niveles: su degradado ya separa, así que aquí basta medio margen */
.events { padding-bottom: calc(var(--section) / 2); }
.events__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: 2.2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 640px) {
  .chips { flex: 0 0 calc(100% + 2 * var(--gutter)); flex-wrap: nowrap; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
.chip { min-height: 40px; padding: 0 1.1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--mist); box-shadow: inset 0 0 0 1px var(--line); transition: color 0.2s, background-color 0.25s, box-shadow 0.25s; }
.chip:hover { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.32); }
.chip[aria-pressed="true"] { background: var(--green); color: var(--ground); box-shadow: none; }
.events__track {
  --pad: max(var(--gutter), (100% - var(--wrap)) / 2);
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 18px;
  margin: 0; padding: 8px var(--pad) 16px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none;
}
.events__track::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .events__track { grid-auto-columns: calc((100% - 18px) / 2.2); } }
@media (min-width: 1000px) { .events__track { grid-auto-columns: calc((100% - 3 * 18px) / 4); } }
/* Cuando la tira entera cabe en pantalla, va centrada en vez de pegada al margen del texto. */
@media (min-width: 1990px) { .events__track { --pad: var(--gutter); grid-auto-columns: calc((var(--wrap) - 3 * 18px) / 4); justify-content: safe center; } }
.event { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--slate); box-shadow: inset 0 0 0 1px var(--line); scroll-snap-align: start; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.event[hidden] { display: none; }
.event:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgb(0 230 118 / 0.35), 0 26px 40px -26px rgb(0 0 0 / 0.9); }
.event__img { aspect-ratio: 4 / 3; overflow: hidden; }
.event__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.event:hover .event__img img { transform: scale(1.06); }
.event__body { display: grid; gap: 0.45rem; padding: 1.1rem 1.15rem 1.2rem; }
.event__type { font: 700 0.7rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }
.event__date { display: flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.event__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.5rem 0 0; padding: 0.8rem 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 0.8rem; color: var(--mist); }
.event__meta li { display: flex; align-items: center; gap: 0.35rem; }
.event__meta .i { color: var(--snow); opacity: 0.75; }
.lvl--easy .i { color: var(--green); opacity: 1; }
.lvl--mid .i { color: var(--amber); opacity: 1; }
.lvl--hard .i { color: var(--ember); opacity: 1; }
.events__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.events__hint { font-size: 0.875rem; color: var(--mist); }
.events__arrows { display: flex; gap: 0.5rem; }
.events__arrows button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 1.1rem; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, opacity 0.25s; }
.events__arrows button:hover:not(:disabled) { background: var(--green); color: var(--ground); box-shadow: none; }
.events__arrows button:disabled { opacity: 0.3; cursor: default; }
.events__empty { color: var(--mist); }
.events__empty a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* Tarjeta abrible: el título es el botón y su ::after cubre toda la tarjeta */
.event { position: relative; }
.event__open { text-align: left; }
.event__open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.event__open:focus-visible { outline: none; }
.event:has(.event__open:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.event__img { position: relative; }
.event__tags { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag { padding: 0.2rem 0.6rem; border-radius: 999px; background: rgb(6 17 14 / 0.85); color: var(--snow); font: 700 0.7rem/1.6 var(--display); letter-spacing: 0.04em; }
.tag--socios { color: var(--amber); }
.tag--cancelada { color: var(--ember); }
.event.is-cancelada .event__img > :not(.event__tags) { opacity: 0.4; filter: grayscale(1); }
.event.is-cancelada h3 { text-decoration: line-through; text-decoration-color: var(--ember); }

/* Recorrido en SVG (miniaturas y salidas de suscriptores): la forma sobre noche lisa, salida en verde y llegada en blanco */
.event__img:has(.ruta), .act__media:has(.ruta) { background: var(--night); }
.event__img .ruta { width: 100%; height: 100%; padding: 12%; }
.ruta { overflow: visible; }
.ruta__linea { fill: none; stroke: var(--green); stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ruta__inicio, .ruta__fin { stroke: var(--night); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.ruta__inicio { fill: var(--green); }
.ruta__fin { fill: var(--snow); }
.perfil { width: 100%; height: 72px; margin-top: 1.1rem; }
.perfil__area { fill: rgb(0 230 118 / 0.14); }
.perfil__linea { fill: none; stroke: var(--green); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* Ventana de actividad (dialog nativo); en móvil sale desde abajo */
.act { width: min(100% - 2rem, 620px); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--r); overflow: auto; overscroll-behavior: contain; background: var(--slate); color: var(--text); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -30px rgb(0 0 0 / 0.9); }
.act::backdrop { background: rgb(6 17 14 / 0.82); }
.act > form { position: sticky; top: 0; z-index: 2; height: 0; }
.act__close { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(6 17 14 / 0.8); color: var(--snow); box-shadow: inset 0 0 0 1px var(--line); }
.act__media > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.act__media:has(.ruta, .act__mapa) { padding: 2rem 1.5rem 1.1rem; }
.act__media .ruta { width: 100%; height: auto; max-height: 280px; }
/* Mapa real: isolation encierra los z-index de Leaflet para que no tapen el botón de cerrar */
.act__mapa { height: 300px; border-radius: 12px; overflow: hidden; isolation: isolate; background: var(--night); }
.act__mapa > .ruta { height: 100%; max-height: none; padding: 1.2rem; }
.leaflet-container { font: 400 0.75rem/1.4 var(--body); }
.act__leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.7rem; font-size: 0.8rem; color: var(--mist); }
.marca { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--ground); }
.marca--fin { margin-left: 0.7rem; background: var(--snow); }
.act__google { margin-left: auto; color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .act__mapa { height: 240px; } }
.act__body { padding: 1.3rem 1.5rem 1.6rem; }
.act h2 { margin-top: 0.5rem; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.act__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.act__tags:empty, .act__desc:empty { display: none; }
.act__desc { margin-top: 0.8rem; color: var(--mist); white-space: pre-line; }
.act__datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 1.25rem; margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.9rem; }
.act__datos dt { color: var(--mist); }
.act__datos dd { margin: 0; color: var(--snow); white-space: pre-line; }
.act__datos a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.act__cta { display: grid; justify-items: start; gap: 0.6rem; margin-top: 1.5rem; }
.act__nota { font-size: 0.875rem; color: var(--mist); }
@media (max-width: 600px) {
  .act { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: var(--r) var(--r) 0 0; }
}

/* Niveles */
.lv1 { --rim: #00c86a; --rim-light: #7dffbd; --field: #0b2a20; }
.lv2 { --rim: #36b3d6; --rim-light: #a9ebff; --field: #0a2231; }
.lv3 { --rim: #df7a3b; --rim-light: #ffc39c; --field: #2b1609; }
.lv4 { --rim: #ffb347; --rim-light: #ffe2a6; --field: #2e1d05; }

.levels { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section); }
.levels__bg, .services__bg, .join__bg { position: absolute; top: -8%; left: 0; z-index: -2; width: 100%; height: 116%; object-fit: cover; }
.levels__bg { object-position: 62% 50%; }
.levels::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--ground) 0%, rgb(10 31 26 / 0.9) 32%, rgb(10 31 26 / 0.3) 62%, rgb(10 31 26 / 0.1) 100%),
    linear-gradient(180deg, var(--ground) 0%, transparent 16%, transparent 82%, var(--ground) 100%);
}
.levels__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
.levels__intro h2 { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 3.9rem); }
.levels__intro > p:not(.eyebrow) { max-width: 46ch; margin-top: 1rem; color: rgb(255 255 255 / 0.84); }
.levels__list { display: grid; gap: 0.6rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.level {
  display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 1rem;
  padding: 0.8rem 1.1rem 0.8rem 0.8rem; border-radius: var(--r);
  background: rgb(20 26 30 / 0.86); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.35s, box-shadow 0.35s, translate 0.5s var(--ease);
}
.level__icon, .badge svg { fill: var(--rim-light); }
.level__icon { width: 54px; height: auto; transition: scale 0.5s var(--ease), rotate 0.5s var(--ease); }
.level h3 { font-size: 1rem; }
.level p { font-size: 0.875rem; color: var(--mist); }
.level .level__pts { font-weight: 600; color: var(--rim-light); font-variant-numeric: tabular-nums; }
.level.is-active { background: rgb(26 31 36 / 0.96); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rim) 65%, transparent); translate: 6px 0; }
.level.is-active .level__icon { scale: 1.08; rotate: -4deg; }

.ascent { position: relative; min-height: 520px; }
.ascent__trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ascent__trail path { fill: none; stroke: rgb(255 255 255 / 0.8); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.badge { position: absolute; left: var(--x); top: var(--y); display: grid; justify-items: center; gap: 0.5rem; width: calc(118px * var(--s)); margin: 0; translate: -50% -50%; transition: scale 0.5s var(--ease); }
.badge svg { width: 100%; height: auto; filter: drop-shadow(0 14px 14px rgb(0 0 0 / 0.55)); transition: filter 0.5s; }
.badge figcaption { font: 800 0.7rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 8px rgb(0 0 0 / 0.8); }
.badge.is-active { scale: 1.14; }
.badge.is-active svg { filter: drop-shadow(0 18px 16px rgb(0 0 0 / 0.6)) drop-shadow(0 6px 12px color-mix(in srgb, var(--rim) 50%, transparent)); }

/* Lo que encontrarás */
.pillars { padding-block: clamp(56px, 7vw, 96px); }
.pillars ul { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.pillars li { display: grid; align-content: start; gap: 0.8rem; padding: 0.3rem clamp(16px, 2.4vw, 32px); }
.pillars li + li { border-left: 1px solid var(--line); }
.pillars li:first-child { padding-left: 0; }
.pillars .i { width: 40px; height: 40px; color: var(--green); }
.pillars h3 { margin-bottom: 0.25rem; font-size: 1rem; }
.pillars p { font-size: 0.875rem; color: var(--mist); }

/* Servicios */
.services { padding-bottom: calc(var(--section) / 2); }
.services__stage { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(460px, 56vw, 660px); overflow: hidden; }
.services__bg { left: auto; right: 0; width: min(80%, 1280px); object-position: 55% 50%; mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.services__stage::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 35%; background: linear-gradient(transparent, var(--ground)); }
.services__text h2 { max-width: 20ch; margin-bottom: 1.2rem; }
.services__text p { max-width: 42ch; margin-bottom: 2rem; color: rgb(255 255 255 / 0.84); }
.services__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -32px; padding: 0; list-style: none; border-radius: var(--r); background: var(--slate); box-shadow: inset 0 0 0 1px var(--line); }
.services__list li { padding: 1.8rem clamp(18px, 1.4vw, 24px); }
.services__list li + li { border-left: 1px solid var(--line); }
.services__list .i { width: 36px; height: 36px; margin-bottom: 1rem; color: var(--green); transition: translate 0.5s var(--ease), rotate 0.5s var(--ease); }
.services__list li:hover .i { translate: 0 -4px; rotate: -6deg; }
.services__list h3 { margin-bottom: 0.35rem; font-size: 1rem; }
.services__list p { font-size: 0.875rem; color: var(--mist); }

/* Únete */
.join { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section); }
.join__bg { object-position: 50% 65%; }
.join::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ground) 0%, rgb(10 31 26 / 0.74) 28%, rgb(6 17 14 / 0.58) 62%, rgb(6 17 14 / 0.94) 100%); }
.join__inner { display: grid; gap: clamp(56px, 8vw, 112px); }
.join__story { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 1.2rem 4rem; }
.join__story h2, .join__story > p:not(.script) { grid-column: 1; }
.join__story > p:not(.script) { max-width: 52ch; color: rgb(255 255 255 / 0.86); }
.join__script { grid-column: 2; grid-row: 1 / span 2; justify-self: center; font-size: clamp(2.4rem, 1.5rem + 2.5vw, 3.7rem); rotate: -6deg; text-shadow: 0 2px 14px rgb(0 0 0 / 0.5); }
.join__cta { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.join__cta > p:not(.join__note) { margin-bottom: 0.8rem; font-size: 1.1rem; color: rgb(255 255 255 / 0.9); }
.join__note { font-size: 0.875rem; color: rgb(255 255 255 / 0.72); }

/* Pie */
.footer { background: var(--night); box-shadow: inset 0 1px 0 var(--line); }
.footer__inner { display: grid; grid-template-columns: 1.3fr 2fr auto; align-items: center; gap: 2rem; padding-block: 52px; }
.footer__brand p { margin-top: 0.8rem; font-size: 0.875rem; color: var(--mist); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.82); }
.footer__links a { transition: color 0.2s; }
.footer__links a:hover { color: var(--green); }
.footer__legal { font-size: 0.875rem; color: var(--mist); }

/* Adaptación */
/* A dos columnas antes de que los títulos dejen de caber en una línea: «Entrenamientos y servicios» mide 227 px
   y «Entrenamientos personalizados», 266 px */
@media (max-width: 1199px) {
  .pillars ul { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .pillars li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1359px) {
  .services__list { grid-template-columns: 1fr 1fr; }
  .services__list li:nth-child(odd) { border-left: 0; }
  .services__list li:nth-child(n + 3) { box-shadow: inset 0 1px 0 var(--line); }
}
@media (max-width: 860px) {
  .about, .levels__grid, .footer__inner { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .ascent { order: -1; min-height: 340px; margin-inline: 8%; }
  .levels::before { background: linear-gradient(180deg, var(--ground) 0%, rgb(10 31 26 / 0.15) 10%, rgb(10 31 26 / 0.35) 34%, rgb(10 31 26 / 0.96) 52%, var(--ground) 100%); }
  .levels__bg { height: 70%; object-position: 70% 50%; }
  .badge { width: calc(96px * var(--s)); }
}
@media (max-width: 760px) {
  .services__stage { display: block; min-height: 0; }
  .services__bg { position: relative; top: 0; width: 100%; height: 340px; mask-image: linear-gradient(180deg, #000 50%, transparent); }
  .services__text { margin-top: -60px; }
  .services__list { margin-top: 2.5rem; }
  .join__story { grid-template-columns: 1fr; }
  .join__script { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 1rem; }
}
@media (max-width: 640px) {
  .hero { align-items: end; }
  .hero__content { padding-block: 120px 64px; }
  .hero__slides::after { background: linear-gradient(180deg, rgb(6 17 14 / 0.55) 0%, transparent 22%, rgb(6 17 14 / 0.55) 52%, var(--ground) 100%); }
  .hero__pager { display: none; }
  .events__foot { flex-direction: column; align-items: flex-start; }
  .pillars ul, .services__list { grid-template-columns: 1fr; }
  .pillars li:nth-child(n) { padding-left: 0; border-left: 0; }
  .services__list li:nth-child(n) { border-left: 0; }
  .services__list li:nth-child(n + 2) { box-shadow: inset 0 1px 0 var(--line); }
}

/* Movimiento: todo el contenido es visible por defecto; esto solo lo acompaña */
@media (prefers-reduced-motion: no-preference) {
  /* Solo con ratón: en móvil y tableta el zoom continuo mantiene la pantalla "cambiando" (Speed Index) y gasta batería */
  @media (min-width: 861px) and (hover: hover) { .hero__slide.is-active { animation: kenburns 9s ease-out both; } }
  .hero__content > :not(h1) { animation: rise 1s var(--ease) both; }
  .hero__content > :nth-child(2) { animation-delay: 0.08s; }
  .hero__content > :nth-child(3) { animation-delay: 0.18s; }
  .hero__content > :nth-child(4) { animation-delay: 0.28s; }
  .hero__pager button[aria-pressed="true"]::after { animation: pager-fill 7s linear both; }

  @supports (animation-timeline: view()) {
    .hero__slides { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    .levels__bg, .services__bg, .join__bg { animation: parallax linear both; animation-timeline: view(); }
  }

  /* Las apariciones al hacer scroll, solo con ratón. En táctil el dedo baja más rápido que la animación:
     el contenido que espera a verse para aparecer se nota como tirones (en el iPhone, franjas vacías). */
  @media (hover: hover) {
  .js [data-reveal] { transition: opacity 0.9s var(--ease), translate 1.1s var(--ease); }
  .js [data-reveal]:not(.is-in) { opacity: 0; translate: 0 32px; }

  .js .about__media:not(.is-in) { opacity: 1; translate: none; }
  .about__media img { transition: clip-path 1.3s var(--ease); clip-path: inset(0 0 0 0 round var(--r)); }
  .js .about__media:not(.is-in) img { clip-path: inset(0 0 0 100% round var(--r)); }

  .script { transition: clip-path 1.4s var(--ease) 0.6s; clip-path: inset(0); }
  .js [data-reveal]:not(.is-in) .script { clip-path: inset(0 100% 0 0); }
  .doodle path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) 1.3s; }
  .js [data-reveal]:not(.is-in) .doodle path { stroke-dashoffset: 1; }

  .js .ascent:not(.is-in) { opacity: 1; translate: none; }
  .ascent__trail { transition: clip-path 2s var(--ease) 0.2s; clip-path: inset(0 0 0 0); }
  .js .ascent:not(.is-in) .ascent__trail { clip-path: inset(0 100% 0 0); }
  .badge { --d: 0.4s; transition: opacity 0.7s var(--ease) var(--d), translate 0.9s var(--ease) var(--d), scale 0.5s var(--ease); }
  .badge.lv2 { --d: 0.85s; }
  .badge.lv3 { --d: 1.3s; }
  .badge.lv4 { --d: 1.75s; }
  .js .ascent:not(.is-in) .badge { opacity: 0; translate: -50% -20%; }

  .event { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), opacity 0.8s var(--ease) var(--d, 0s), translate 0.9s var(--ease) var(--d, 0s); }
  .event:nth-child(2) { --d: 0.08s; }
  .event:nth-child(3) { --d: 0.16s; }
  .event:nth-child(4) { --d: 0.24s; }
  .event:nth-child(n + 5) { --d: 0.32s; }
  .js [data-track]:not(.is-in) .event { opacity: 0; translate: 48px 0; }
  }
  .act[open] { animation: rise 0.5s var(--ease); }
}

@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
@keyframes pager-fill { from { background-size: 100% 0%; } to { background-size: 100% 100%; } }
@keyframes drift { to { translate: 0 14svh; } }
@keyframes parallax { from { translate: 0 -6%; } to { translate: 0 6%; } }

/* Móvil y pantallas táctiles */
a, button { -webkit-tap-highlight-color: transparent; }
html:has(.menu:popover-open), html:has(.act[open]) { overflow: hidden; }
.footer__links a { padding-block: 0.4rem; }

/* Sin ratón, el hover se queda "pegado" tras tocar: nada de elevaciones persistentes */
@media (hover: none) {
  .btn:hover, .event:hover { transform: none; }
  .btn:active { transform: scale(0.98); }
  .event:hover .event__img img { transform: none; }
  .services__list li:hover .i { translate: none; rotate: none; }
  .level.is-active { translate: none; }
}

/* En móvil y en tableta el scroll manda: sin parallax ni desenfoque de fondo, que en Android modesto y en Safari dan tirones */
@media (max-width: 860px), (hover: none) {
  .hero__slides, .levels__bg, .services__bg, .join__bg { animation: none; }
  .nav.is-solid { background: rgb(6 17 14 / 0.94); backdrop-filter: none; }
  .btn--ghost { backdrop-filter: none; background: rgb(6 17 14 / 0.45); }
}

/* Precios */
.pricing { padding-block: var(--section); background: var(--night); }
.pricing__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(36px, 5vw, 88px); align-items: start; }
.pricing__head h2 { margin-bottom: 1rem; }
.pricing__head > p { max-width: 44ch; color: var(--mist); }
.includes { display: grid; gap: 0.8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.includes li { display: flex; gap: 0.7rem; align-items: flex-start; }
.includes .i { width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; color: var(--green); }
.plans { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.plan { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6rem 1.5rem; padding: 1.3rem 1.4rem; border-radius: var(--r); background: var(--slate); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.35s, translate 0.5s var(--ease); }
.plan__name { font: 700 1.05rem/1.3 var(--display); color: var(--snow); }
.plan__tag { margin-left: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--green); color: var(--ground); font: 700 0.7rem/1.6 var(--display); letter-spacing: 0.04em; vertical-align: middle; }
.plan__meta { margin-top: 0.3rem; font-size: 0.875rem; color: var(--mist); }
.plan__save { margin-left: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgb(255 179 71 / 0.16); color: var(--amber); font-size: 0.8rem; font-weight: 600; }
.plan__price { font: 800 clamp(1.7rem, 1.3rem + 1.1vw, 2.2rem)/1 var(--display); letter-spacing: -0.02em; color: var(--snow); font-variant-numeric: tabular-nums; }
.plan__price span { font: 400 0.875rem/1 var(--body); color: var(--mist); letter-spacing: 0; }
.plan--best { background: rgb(0 230 118 / 0.07); box-shadow: inset 0 0 0 1.5px rgb(0 230 118 / 0.55); }
.plan--best .plan__save { background: rgb(0 230 118 / 0.18); color: var(--green); }
.pricing__note { margin-top: 1.6rem; font-size: 0.875rem; color: var(--mist); }
.pricing__note a, .join__note a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .plan:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgb(0 230 118 / 0.35), 0 22px 34px -26px rgb(0 0 0 / 0.9); } }
.plans { container-type: inline-size; }
.plan__tag, .plan__save, .plan__price { white-space: nowrap; }
@media (max-width: 900px) { .pricing__grid { grid-template-columns: 1fr; } }
/* En una columna estrecha (móvil, tableta) cada plan se apila: nombre, precio, equivalencia y el botón a lo ancho */
@container (max-width: 540px) {
  .plan { grid-template-columns: 1fr; gap: 0.35rem; }
  .plan > div { display: contents; }
  .plan__price { order: 1; margin-top: 0.35rem; }
  .plan__meta { order: 2; margin-top: 0; }
  .plan .btn { order: 3; width: 100%; margin-top: 0.8rem; }
}

/* Pie: enlaces legales */
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.875rem; color: var(--mist); }
.footer__legal-links a { padding-block: 0.4rem; transition: color 0.2s; }
.footer__legal-links a:hover { color: var(--green); }

/* Páginas legales */
.legal { padding-block: 130px var(--section); }
.legal h1 { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
.legal__intro { margin-top: 1rem; max-width: 70ch; color: var(--mist); }
.legal h2 { margin-top: 3rem; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); scroll-margin-top: 100px; }
.legal h3 { margin-top: 1.8rem; }
.legal p, .legal li { max-width: 72ch; margin-top: 0.9rem; color: var(--mist); }
.legal ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.legal a:not(.btn) { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal dt { margin-top: 1rem; font-weight: 600; color: var(--snow); }
.legal dd { margin: 0.2rem 0 0; color: var(--mist); }
.pend { padding: 0.1rem 0.55rem; border-radius: 999px; background: rgb(255 179 71 / 0.16); color: var(--amber); font-weight: 600; }
.legal__box { margin-top: 1.8rem; padding: 1.1rem 1.3rem; border-radius: var(--r); background: rgb(255 179 71 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 179 71 / 0.35); }
.legal__box p { margin-top: 0.4rem; color: var(--amber); }
.legal__box p:first-child { margin-top: 0; font-weight: 700; color: var(--amber); }
.legal__toc { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; padding: 0; list-style: none; }
.legal__toc a { display: inline-block; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--mist); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.legal__toc a:hover { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.32); }
.legal__cta { margin-left: auto; }
.legal__back { margin-top: 3rem; }

/* Solo para lectores de pantalla */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Suscripción: explicación a la izquierda, resumen de pago fijo a la derecha; en móvil, primero se explica y luego se paga */
.alta { display: grid; gap: 3.5rem; padding-block: 130px var(--section); }
.alta h1 { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
.alta h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.alta__intro p { max-width: 52ch; margin-top: 1rem; font-size: 1.1rem; color: var(--mist); }
.alta__saltar { display: inline-block; margin-top: 1rem; padding-block: 0.4rem; color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.beneficios { display: grid; gap: 1.5rem 2rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.beneficios li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.beneficios .i { width: 1.6rem; height: 1.6rem; color: var(--green); }
.beneficios p, .pasos p { margin-top: 0.3rem; color: var(--mist); }
@media (min-width: 640px) { .beneficios { grid-template-columns: 1fr 1fr; } }

.pasos { display: grid; gap: 1.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; counter-increment: paso; }
.pasos li::before { content: counter(paso); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); font: 800 1.05rem/1 var(--display); color: var(--snow); }
.pasos h3 { align-self: center; min-height: 40px; display: flex; align-items: center; }

.alta__fundadores { display: grid; gap: 1.2rem; margin: 0; }
.alta__fundadores img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 65% 50%; border-radius: var(--r); }
.alta__fundadores p:not(.script) { max-width: 52ch; font-size: 1.1rem; color: var(--text); }
.alta__fundadores .script { margin-top: 0.8rem; font-size: clamp(2.2rem, 1.5rem + 2vw, 3.2rem); rotate: -6deg; transform-origin: left; }
@media (min-width: 640px) { .alta__fundadores { grid-template-columns: 240px 1fr; align-items: center; gap: 2rem; } }

.resumen { scroll-margin-top: 90px; padding: 1.6rem; border-radius: var(--r); background: var(--slate); box-shadow: inset 0 0 0 1px var(--line); }
.elige { display: grid; gap: 0.6rem; margin: 1.2rem 0 0; padding: 0; border: 0; }
.elige__op { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.2rem 1rem; padding: 1rem 1.1rem; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background-color 0.25s, box-shadow 0.25s; }
.elige__op input { position: absolute; opacity: 0; pointer-events: none; }
.elige__op:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.32); }
.elige__op:has(:checked) { background: rgb(0 230 118 / 0.07); box-shadow: inset 0 0 0 1.5px rgb(0 230 118 / 0.55); }
.elige__op:has(:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.elige__nombre, .elige__precio { font: 700 1.05rem/1.3 var(--display); color: var(--snow); font-variant-numeric: tabular-nums; }
.elige__meta { grid-column: 1 / -1; font-size: 0.875rem; color: var(--mist); }
.resumen__total { display: grid; gap: 0.5rem; margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.875rem; }
.resumen__total div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.resumen__total dt { color: var(--mist); }
.resumen__total dd { margin: 0; color: var(--snow); font-variant-numeric: tabular-nums; }
.resumen__hoy { margin-top: 0.4rem; }
.resumen__hoy dt { color: var(--snow); font-weight: 600; }
.resumen__hoy dd { font: 800 clamp(1.7rem, 1.3rem + 1.1vw, 2.2rem)/1 var(--display); letter-spacing: -0.02em; }
.acepto { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.4rem; font-size: 0.875rem; color: var(--mist); cursor: pointer; }
.acepto input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.acepto a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.resumen .btn { width: 100%; margin-top: 1rem; }
.garantias { display: grid; gap: 0.3rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--mist); }

.dudas details { border-bottom: 1px solid var(--line); }
.dudas h2 { margin-bottom: 0.6rem; }
.dudas summary { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; font: 700 1.05rem/1.3 var(--display); color: var(--snow); cursor: pointer; list-style: none; }
.dudas summary::-webkit-details-marker { display: none; }
.dudas summary::after { content: "+"; color: var(--mist); transition: rotate 0.3s var(--ease); }
.dudas details[open] summary::after { rotate: 45deg; }
.dudas details p { max-width: 60ch; padding-bottom: 1.1rem; color: var(--mist); }

@media (min-width: 1000px) {
  .alta { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .alta > * { grid-column: 1; }
  .alta > .resumen { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 96px; }
  .alta__saltar { display: none; }
}