/* CrossFit Lanzarote — base: tokens, tipografía, botones, cabecera, cursor, entrada y pie.
   Regla: todo se ve sin JS. Lo que se oculta para animar va bajo .motion (lo pone main.js). */

:root {
  /* Paleta volcánica: negro lava, basalto, ceniza, hueso y carmesí de marca */
  --lava: #0a0807;
  --lava-2: #141110;
  --lava-3: #1f1a18;
  --ash: #a39d96;
  --ash-dark: #5f5954;
  --bone: #f1ede6;
  --red: #c0112b;          /* carmesí de sus tarifas: fondos y texto grande */
  --red-hot: #ff3d55;      /* versión luminosa para texto pequeño sobre negro (contraste AA) */
  --red-deep: #6e0816;
  --ocean: #0e5466;
  --line: rgba(241, 237, 230, 0.14);
  --line-strong: rgba(241, 237, 230, 0.3);
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.18, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --header-h: 76px;
  --topbar-h: 32px;
  --dock-h: 0px;
  /* Tema por sección: oscuro por defecto; .is-light lo invierte */
  --bg: var(--lava);
  --fg: var(--bone);
  --muted: var(--ash);
  --hair: var(--line);
  --hair-strong: var(--line-strong);
  --accent: var(--red-hot);
  --card: var(--lava-2);
  --footer-bg: #000000;   /* negro puro: el mismo fondo que el JPEG del logo, para que se funda */
  color-scheme: light dark;
}

/* Secciones claras: blanco roto y ceniza muy clara; el carmesí de marca ya da AA sobre ellas */
.is-light {
  --bg: var(--bone);
  --fg: var(--lava);
  --muted: #55504b;
  --hair: rgba(10, 8, 7, 0.14);
  --hair-strong: rgba(10, 8, 7, 0.32);
  --accent: var(--red);
  --card: #ffffff;
  background: var(--bg);
  color: var(--fg);
}
.is-light.is-alt { --bg: #e6e0d7; }
.is-light :focus-visible { outline-color: var(--red); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--topbar-h) + 12px); }
body {
  margin: 0; background: var(--bone); color: var(--lava); font-family: var(--text);
  font-size: clamp(16px, 0.3vw + 15px, 18px); line-height: 1.55; overflow-x: clip;
  padding-bottom: var(--dock-h); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: normal; color: var(--accent); }
.is-light em { color: var(--red); }
strong { font-weight: 800; }
.mono { font-family: var(--mono); }
::selection { background: var(--red); color: var(--bone); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 500; padding: 12px 18px; background: var(--red);
  color: var(--bone); font-weight: 800; transform: translateY(-180%); transition: transform 0.2s;
}
.skip:focus { transform: none; }
main:focus { outline: none; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Grano de película fijo: textura de ceniza volcánica */
.grain {
  position: fixed; inset: 0; z-index: 250; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tipografía ---------------------------------------------------------- */
.eyebrow {
  display: flex; align-items: center; gap: 0.7em; margin: 0 0 1.2rem; color: var(--muted);
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.idx { color: var(--accent); }
.idx::after { content: " /"; color: var(--ash-dark); }
.h-xxl, .h-xl { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.005em; }
.h-xxl { font-size: clamp(3.6rem, 12vw, 12.5rem); }
.h-xl { font-size: clamp(3rem, 8.4vw, 8rem); }
.sec-head { display: grid; gap: 0 48px; margin-bottom: clamp(40px, 6vw, 88px); }
.sec-head .eyebrow { grid-column: 1 / -1; }
.sec-head__aside { max-width: 44ch; color: var(--muted); margin: 24px 0 0; }
.sec-head__aside strong { color: var(--fg); }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1.5fr 1fr; align-items: end; }
  .sec-head__aside { margin: 0 0 0.5em; }
}
.section { padding-block: clamp(88px, 12vw, 180px); position: relative; }

/* Revelados (solo con .motion) ---------------------------------------- */
.motion [data-reveal] { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), clip-path 1.1s var(--ease-io); }
.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 40px, 0); }
.motion .wipe[data-reveal] { opacity: 1; transform: none; }
.motion .wipe[data-reveal]:not(.is-in) { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.wipe { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); overflow: hidden; }

/* Botones ------------------------------------------------------------- */
.btn {
  --bg: transparent; --fg: var(--bone); --bd: var(--hair-strong); --fill: var(--bone); --fill-fg: var(--lava);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6em; min-height: 48px; padding: 0.8em 1.5em; background: var(--bg); color: var(--fg); border: 2px solid var(--bd);
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill);
  clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); transition: clip-path 0.5s var(--ease-io);
}
.btn:hover::before, .btn:focus-visible::before { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); }
.btn:hover, .btn:focus-visible { color: var(--fill-fg); }
.btn--red { --bg: var(--red); --bd: var(--red); --fill: var(--bone); --fill-fg: var(--lava); }
.btn--ghost { --fg: currentColor; --bd: currentColor; }
.is-light .btn--ghost { --fill: var(--lava); --fill-fg: var(--bone); }
.is-light .btn--red { --fill: var(--lava); --fill-fg: var(--bone); }
.btn--sm { min-height: 44px; padding: 0.5em 1.1em; font-size: 1rem; }
.btn--lg { min-height: 56px; padding: 0.9em 1.8em; font-size: 1.25rem; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-weight: 800;
  text-decoration: none; border-bottom: 2px solid var(--red); font-family: var(--mono); font-size: 0.95rem;
}
.link-arrow::after { content: "↗"; transition: transform 0.35s var(--ease-out); }
.link-arrow:hover::after { transform: translate(4px, -4px); }

/* Cabecera: barra fina superior + barra negra fija. Mismo aspecto en todas las páginas:
   transparente sobre el hero negro y negro puro (#000, el del logo) al hacer scroll. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--bone); transition: transform 0.45s var(--ease-out); }
.site-header.is-hidden { transform: translateY(-100%); }
.topbar { height: var(--topbar-h); background: #000; border-bottom: 1px solid var(--line); }
.topbar__in {
  height: 100%; display: flex; align-items: center; gap: 28px; padding-inline: var(--gutter);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash);
}
.topbar__item { margin: 0; text-decoration: none; }
a.topbar__item:hover { color: var(--bone); }
.topbar .lang { margin-left: auto; }
.site-header__bar {
  height: var(--header-h); display: flex; align-items: center; gap: 20px; padding-inline: var(--gutter);
  position: relative; z-index: 2; border-bottom: 1px solid transparent; transition: background-color 0.35s, border-color 0.35s;
}
.site-header.is-solid .site-header__bar, .site-header.is-open .site-header__bar { background: #000; border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; min-height: 44px; flex: none; }
/* Logo original (JPEG sobre negro puro): sin borde, se funde con la barra negra */
.brand img { height: 48px; width: auto; }
.nav { margin-inline: auto; }
.nav__list { display: flex; gap: 2px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-family: var(--display); font-weight: 800; font-size: 1.08rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--red-hot); }
.site-header__tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav + .site-header__tools { margin-left: 0; }
.site-header :focus-visible { outline-color: var(--red-hot); }
.status {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mono); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: inherit; white-space: nowrap;
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ash-dark); flex: none; }
.status.is-open { color: var(--bone); }
.status.is-open .status__dot { background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
/* Selector de idioma: el actual marcado; el otro enlaza a la página equivalente */
.lang { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; }
.lang__on { color: var(--bone); padding: 2px 6px; border: 1px solid var(--line-strong); }
.lang__off { color: var(--ash); padding: 2px 6px; border: 1px solid transparent; text-decoration: none; }
.lang__off:hover { color: var(--bone); border-color: var(--line-strong); }

.burger {
  display: none; width: 48px; height: 48px; border: 2px solid currentColor; background: transparent; color: inherit;
  align-items: center; justify-content: center; flex-direction: column; gap: 6px;
}
.burger__l { width: 20px; height: 2px; background: currentColor; transition: transform 0.35s var(--ease-out); }
.site-header.is-open .burger__l--a { transform: translateY(4px) rotate(45deg); }
.site-header.is-open .burger__l--b { transform: translateY(-4px) rotate(-45deg); }
.mm {
  display: none; position: fixed; inset: var(--header-h) 0 0; z-index: 1; background: #000; color: var(--bone);
  padding: 16px var(--gutter) calc(110px + env(safe-area-inset-bottom)); overflow-y: auto;
}
.mm:target, .site-header.is-open .mm { display: block; }
.mm__status { color: var(--ash); padding: 8px 0 14px; }
.mm__links a {
  display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1; text-decoration: none;
}
.mm__links a:hover, .mm__links a[aria-current="page"] { color: var(--red-hot); }
.mm__idx { font-family: var(--mono); font-size: 0.75rem; color: var(--red-hot); font-weight: 700; }
.mm__cta { margin-top: 24px; width: 100%; }
.mm__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.mm__foot a:not(.lang__off) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ash); }

/* Cursor propio + magnetismo (solo ratón) ----------------------------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor .cursor { display: block; position: fixed; inset: 0; z-index: 300; pointer-events: none; }
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
  .cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; will-change: transform; transform: translate3d(-120px, -120px, 0); }
  .cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--red); border-radius: 50%; }
  .cursor__ring {
    width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid rgba(192, 17, 43, 0.75); border-radius: 50%;
    display: grid; place-items: center;
    transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out), background-color 0.3s, border-color 0.3s;
  }
  .cursor.is-hover .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--red); }
  .cursor.is-label .cursor__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--red); border-color: var(--red); }
  .cursor.is-label .cursor__dot { opacity: 0; }
  .cursor__txt { color: var(--bone); font-family: var(--display); font-weight: 900; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transition: opacity 0.2s; }
  .cursor.is-label .cursor__txt { opacity: 1; }
}

/* Entrada: cuenta atrás 3-2-1-GO ---------------------------------------
   Solo con html.intro. Se va sola a los 2,4 s aunque falle el JS. */
.loader { display: none; }
.intro .loader {
  display: block; position: fixed; inset: 0; z-index: 400; pointer-events: auto;
  animation: loader-safety 0.01s linear 2.4s forwards;
}
@keyframes loader-safety { to { visibility: hidden; pointer-events: none; } }
.loader__slab { position: absolute; left: 0; right: 0; background: var(--lava); }
.loader__slab--a { top: 0; height: 50.5%; animation: slab-up 0.7s var(--ease-io) 1.35s forwards; }
.loader__slab--b { bottom: 0; height: 50.5%; box-shadow: inset 0 3px 0 var(--red); animation: slab-down 0.7s var(--ease-io) 1.35s forwards; }
@keyframes slab-up { to { transform: translateY(-101%) skewY(-4deg); } }
@keyframes slab-down { to { transform: translateY(101%) skewY(-4deg); } }
.loader__count { position: absolute; inset: 0; display: grid; place-items: center; }
.loader__count span {
  grid-area: 1 / 1; font-family: var(--display); font-weight: 900; font-size: clamp(9rem, 34vw, 26rem); line-height: 1;
  color: var(--bone); opacity: 0; animation: tick 0.34s var(--ease-out) both;
}
.loader__count span:nth-child(1) { animation-delay: 0.05s; }
.loader__count span:nth-child(2) { animation-delay: 0.37s; }
.loader__count span:nth-child(3) { animation-delay: 0.69s; }
.loader__count .loader__go { color: var(--red); animation: go 0.5s var(--ease-out) 1.01s both; }
@keyframes tick { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(0.92); } }
@keyframes go { 0% { opacity: 0; transform: scale(1.6); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
.loader__meta {
  position: absolute; left: var(--gutter); bottom: var(--gutter); margin: 0; color: var(--muted);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  animation: meta-out 0.3s 1.3s forwards;
}
@keyframes meta-out { to { opacity: 0; } }
.loader.is-done { display: none; }

/* Pie ----------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; background: var(--footer-bg); color: var(--bone); padding-bottom: 32px; }
.site-footer :focus-visible { outline-color: var(--red-hot); }
.foot__giant {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; white-space: nowrap; line-height: 0.8;
  font-size: 11.6vw; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1.5px rgba(241, 237, 230, 0.22);
  padding-top: 0.15em; text-align: center;
}
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding-block: 48px 36px; border-bottom: 1px solid var(--line); }
.foot__logo { width: clamp(180px, 22vw, 260px); }
.foot__claim { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 0.92; }
.foot__claim em { color: var(--red-hot); }
.foot__journal img { width: 110px; }
.foot__cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding-block: 20px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.foot__nav a:hover, .foot__legal a:hover { color: var(--red-hot); }
.foot__addr { font-style: normal; color: var(--ash); font-size: 0.9rem; line-height: 1.7; }
.foot__addr a { color: var(--bone); }
.foot__bottom { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot__legal-label { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.85rem; color: var(--ash); }
.foot__legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.85rem; font-weight: 700; }
.foot__small { margin: 0; color: var(--ash); font-size: 0.78rem; max-width: 100ch; }
.foot__small a { color: var(--bone); }

/* Barra fija inferior (móvil) ----------------------------------------- */
.dock { display: none; }

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1360px) {
  .nav__link { padding: 0 7px; font-size: 1rem; }
  .nav__link::after { left: 7px; right: 7px; }
}
/* Por debajo de 1200 px el menú no cabe: hamburguesa y barra fina oculta (el estado va al panel) */
@media (max-width: 1199px) {
  :root { --topbar-h: 0px; }
  .topbar { display: none; }
  .nav { display: none; }
  .burger { display: inline-flex; }
  .nav + .site-header__tools { margin-left: auto; }
}
@media (max-width: 979px) {
  :root { --header-h: 64px; --dock-h: calc(66px + env(safe-area-inset-bottom)); }
  .hide-sm { display: none; }
  .brand img { height: 38px; }
  .dock {
    display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 6px; position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0.94); color: var(--bone);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  .dock__btn {
    display: flex; align-items: center; justify-content: center; min-height: 50px; border: 1px solid var(--line-strong);
    font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  }
  .dock__btn--red { background: var(--red); border-color: var(--red); color: var(--bone); }
}
@media (max-width: 420px) {
  .dock__btn { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}