/* Eje Fisioterapia · Granada (concepto WEBO). Cálido y cercano: niebla verde, salvia, bosque y un sol.
   Regla de formas: botones y chips en píldora, bloques a 36 px, banda final a 48 px e imágenes en guijarro irregular.
   Movimiento (5/10, cercano y fluido): el eje, una columna de vértebras en el margen que se dibuja con el scroll y se
   alinea al pasar por cada sección (eje.js); guijarros que respiran despacio; pasos que se posan uno tras otro.
   Estados ocultos solo bajo html.mov (concepto.js). */

@font-face { font-family: "Lexend"; src: url("/assets/fonts/conceptos/lexend-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/assets/fonts/conceptos/lexend-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/assets/fonts/conceptos/lexend-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --niebla: #EEF3EC;
  --salvia: #CFE0CC;
  --salvia-2: #B7D0B2;
  --bosque: #183A31;
  --bosque-2: #3F5F55;
  --bosque-3: #21483D;
  --sol: #F2B33D;
  --sol-claro: #F6C462;
  --blanco: #FBFCF8;
  --fuente: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --margen: clamp(20px, 5vw, 72px);
  --r-bloque: 36px;
  --guijarro: 62% 38% 46% 54% / 46% 52% 48% 54%;
}

html { background: var(--niebla); scrollbar-color: var(--salvia-2) var(--niebla); }
/* Desplazamiento suave por CSS solo sin el JS de movimiento (con él lo hace eje.js: el CSS descuadra ScrollTrigger, que lo lee al cargar) */
@media (prefers-reduced-motion: no-preference) { html:not(.mov) { scroll-behavior: smooth; } }
[tabindex="-1"]:focus { outline: none; }
body {
  background: var(--niebla); color: var(--bosque);
  font: 400 1.0625rem/1.6 var(--fuente);
  font-kerning: normal;
}
::selection { background: var(--sol); color: var(--bosque); }
:focus-visible { outline: 3px solid var(--bosque); outline-offset: 3px; border-radius: 8px; }

.saltar {
  position: absolute; left: 16px; top: 16px; z-index: 50;
  padding: 10px 18px; border-radius: 999px; background: var(--bosque); color: var(--niebla); text-decoration: none;
  transform: translateY(-180%);
}
.saltar:focus-visible { transform: none; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px; border-radius: 999px;
  font: 600 1rem/1 var(--fuente); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: background-color 220ms ease, box-shadow 260ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--sol { background: var(--sol); color: var(--bosque); box-shadow: 0 10px 24px -14px rgb(150 100 10 / .55); }
.boton--peque { min-height: 44px; padding: 0 20px; font-size: .9375rem; }
.enlace--claro { color: var(--niebla) !important; text-decoration-color: rgb(242 179 61 / .7) !important; }
.enlace {
  font-weight: 400; color: var(--bosque);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
  text-decoration-color: rgb(24 58 49 / .35);
  transition: text-decoration-color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .boton--sol:hover { background: var(--sol-claro); box-shadow: 0 14px 30px -14px rgb(150 100 10 / .6); }
  .enlace:hover { text-decoration-color: var(--bosque); }
  .enlace--claro:hover { text-decoration-color: var(--sol) !important; }
  .cabecera__nav a:hover { color: var(--bosque); background: rgb(207 224 204 / .6); }
}

/* Cabecera */
.cabecera {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  max-width: 1440px; margin-inline: auto;
  padding: 22px var(--margen);
}
.marca { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--bosque); text-decoration: none; font-size: 1.375rem; line-height: 1; }
.marca__signo { width: 34px; height: 34px; flex: none; }
.marca__signo path { fill: var(--sol); }
.marca__signo .marca__eje { fill: none; stroke: var(--bosque); stroke-width: 3; stroke-linecap: round; }
.marca__nombre { font-weight: 600; letter-spacing: -.02em; }
.marca__apellido { font-weight: 300; letter-spacing: -.01em; margin-left: -4px; }
.cabecera__nav ul { display: flex; gap: 4px; }
.cabecera__nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  font-size: .9375rem; color: var(--bosque-2); text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}

/* Portada */
.portada {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
  align-items: center;
  max-width: 1440px; margin-inline: auto;
  min-height: calc(100svh - 88px);
  padding: clamp(16px, 3vw, 40px) var(--margen) clamp(48px, 6vw, 80px);
}
.portada__texto { grid-column: 1 / span 7; }
.portada h1 {
  font: 600 clamp(2.5rem, 4.7vw, 4.25rem)/1.04 var(--fuente);
  letter-spacing: -.035em; text-wrap: balance; max-width: 13em;
}
.portada__sub {
  max-width: 34ch; margin-top: clamp(20px, 2.2vw, 28px);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem); font-weight: 300; line-height: 1.55; color: var(--bosque-2);
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(28px, 3vw, 40px); }
.tratamos { margin-top: clamp(36px, 4.4vw, 56px); }
.tratamos__titulo { font-size: .875rem; color: var(--bosque-2); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.chips li {
  padding: 9px 16px; border-radius: 999px;
  background: var(--blanco); box-shadow: inset 0 0 0 1px var(--salvia);
  font-size: .9375rem; line-height: 1.3; color: var(--bosque);
}

.portada__imagen { grid-column: 8 / span 5; position: relative; }
.slot { position: relative; overflow: hidden; margin: 0; }
.slot--guijarro {
  aspect-ratio: 1 / 1.08; border-radius: var(--guijarro);
  background:
    radial-gradient(ellipse 46% 40% at 76% 20%, rgb(242 179 61 / .62), transparent 72%),
    radial-gradient(ellipse 30% 26% at 74% 22%, rgb(255 224 150 / .5), transparent 70%),
    radial-gradient(ellipse 70% 60% at 18% 92%, rgb(24 58 49 / .2), transparent 72%),
    linear-gradient(158deg, #E2EDDF 0%, #CFE0CC 46%, #B4CDAF 100%);
  box-shadow: 0 40px 70px -40px rgb(24 58 49 / .45);
}
/* Curvas de nivel suaves: el movimiento como ondas que se abren */
.slot--guijarro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(ellipse 130% 100% at 74% 22%, transparent 0 34px, rgb(251 252 248 / .4) 34px 35.2px);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000 20%, transparent 75%);
}
.canto {
  position: absolute; pointer-events: none;
  border-radius: 54% 46% 60% 40% / 52% 58% 42% 48%;
}
.canto--sol {
  width: 26%; aspect-ratio: 1.18 / 1; left: -7%; bottom: 7%;
  background: radial-gradient(ellipse at 34% 30%, #F7C866, var(--sol) 60%, #E7A12A);
  box-shadow: 0 18px 36px -18px rgb(150 100 10 / .6);
}

/* Titular por palabras: cada una sube desde su propia máscara */
.portada h1 .pal { display: inline-block; overflow: clip; vertical-align: top; padding: .06em .02em .14em; margin: -.06em -.02em -.14em; }
.portada h1 .pal > span { display: inline-block; }

/* Entrada (CSS, no espera al JS): las palabras suben, el guijarro se asienta y el canto de sol llega rodando.
   Luego, mientras la portada se ve, el guijarro respira y el canto flota (eje.js pone .en-pantalla) */
html.mov .portada h1 .pal > span { animation: eje-palabra 950ms var(--ease) both; animation-delay: calc(80ms + var(--i) * 60ms); }
html.mov .portada__sub { animation: eje-sube 850ms var(--ease) 440ms both; }
html.mov .acciones { animation: eje-sube 850ms var(--ease) 540ms both; }
html.mov .tratamos__titulo { animation: eje-sube 850ms var(--ease) 640ms both; }
html.mov .chips li { animation: eje-chip 700ms var(--ease) both; animation-delay: calc(700ms + var(--i) * 55ms); }
html.mov .portada .slot--guijarro { animation: eje-asienta 1100ms var(--ease) 120ms both, eje-respira 6.5s ease-in-out 1.3s infinite alternate; }
html.mov .canto--sol { animation: eje-rueda 1300ms var(--ease) 560ms both, eje-flota 6s ease-in-out 1.9s infinite alternate; }
@media (min-width: 1024px) {
  html.mov .portada .slot--guijarro { animation: eje-asienta 1100ms var(--ease) 120ms both, eje-respira 6.5s ease-in-out 1.3s infinite alternate, eje-guijarro 12s ease-in-out 1.3s infinite alternate; }
}
html.mov .portada:not(.en-pantalla) .slot--guijarro,
html.mov .portada:not(.en-pantalla) .canto--sol { animation-play-state: running, paused, paused; }
@keyframes eje-palabra { from { transform: translateY(108%); } }
@keyframes eje-sube { from { opacity: 0; transform: translateY(14px); } }
@keyframes eje-chip { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes eje-asienta { from { opacity: 0; transform: scale(.94) rotate(-2deg); } }
@keyframes eje-rueda { from { opacity: 0; translate: -56px 6px; rotate: -48deg; } }
@keyframes eje-respira { to { scale: 1.018; } }
@keyframes eje-flota { to { translate: 0 -7px; rotate: 7deg; } }
@keyframes eje-guijarro { to { border-radius: 54% 46% 40% 60% / 52% 44% 56% 48%; } }
@keyframes eje-guijarro-dos { to { border-radius: 50% 50% 62% 38% / 46% 52% 48% 54%; } }

/* El eje: columna de vértebras en el margen izquierdo (la crea eje.js; decorativa). Sin movimiento se ve entera y alineada */
main { position: relative; }
.columna {
  position: absolute; z-index: 0; pointer-events: none;
  left: calc(max(0px, (100% - 1440px) / 2) + var(--margen) / 2); width: 0;
}
.columna__via, .columna__trazo { position: absolute; left: -1px; top: 0; width: 2px; height: 100%; border-radius: 2px; }
.columna__via { background: rgb(24 58 49 / .1); }
.columna__trazo > span { display: block; height: 100%; border-radius: 2px; background: var(--bosque); transform-origin: 50% 0; }
.columna__punta { display: none; }
html.mov .columna__punta {
  display: block; position: absolute; left: -3px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sol); box-shadow: 0 0 0 3px var(--niebla);
}
.vertebra {
  position: absolute; left: 0; width: 12px; height: 7px; margin: -3.5px 0 0 -6px; border-radius: 4px;
  background: var(--salvia-2);
  transition: background-color 360ms ease, scale 420ms var(--ease);
}
.vertebra--mayor {
  width: 20px; height: 12px; margin: -6px 0 0 -10px; border-radius: 6px;
  background: var(--niebla); box-shadow: inset 0 0 0 2px var(--salvia-2); scale: .86;
  transition: background-color 360ms ease, box-shadow 360ms ease, scale 520ms var(--ease);
}
.vertebra.encendida { background: var(--bosque-2); }
.vertebra--mayor.encendida { background: var(--sol); box-shadow: inset 0 0 0 2px var(--bosque), 0 6px 14px -6px rgb(150 100 10 / .7); scale: 1; }
/* Mientras se dibuja al cargar: el tramo ya recorrido aparece de arriba abajo */
html.mov .columna__trazo { animation: eje-traza 1300ms cubic-bezier(.65, 0, .35, 1) 700ms both; }
@keyframes eje-traza { from { clip-path: inset(-8px -12px 100% -12px); } to { clip-path: inset(-8px -12px -8px -12px); } }

/* Así es una sesión */
.sesion {
  max-width: 1440px; margin-inline: auto;
  padding: clamp(80px, 10vw, 144px) var(--margen) clamp(64px, 8vw, 112px);
}
.sesion__cabeza { max-width: 620px; }
.sesion h2, .enfoque h2, .banda h2 {
  font: 600 clamp(2.125rem, 3.8vw, 3.375rem)/1.08 var(--fuente); letter-spacing: -.03em; text-wrap: balance;
}
.sesion__cabeza p { margin-top: 16px; color: var(--bosque-2); font-weight: 300; font-size: 1.125rem; max-width: 40ch; }
.pasos {
  display: grid; grid-template-columns: 1.18fr 1fr; grid-template-rows: auto auto; gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}
.paso {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-bloque);
  padding: clamp(28px, 3.4vw, 48px);
}
.paso__num { display: block; font: 300 clamp(3.5rem, 6vw, 5.5rem)/.9 var(--fuente); letter-spacing: -.04em; margin-bottom: clamp(20px, 3vw, 40px); }
.paso h3 { font: 600 clamp(1.375rem, 2vw, 1.75rem)/1.18 var(--fuente); letter-spacing: -.02em; max-width: 17em; text-wrap: balance; }
.paso p { margin-top: 12px; max-width: 38ch; color: var(--bosque-2); }
.paso--uno {
  grid-row: 1 / span 2;
  display: flex; flex-direction: column;
  background: var(--blanco);
  box-shadow: 0 30px 60px -44px rgb(24 58 49 / .4);
  padding-top: clamp(36px, 4.4vw, 64px);
}
.paso--uno .paso__num { font-size: clamp(5rem, 9vw, 8.5rem); color: var(--bosque); }
.paso--uno h3 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); margin-top: auto; }
.paso--uno p:not(.paso__nota) { font-size: 1.125rem; }
.paso__nota {
  align-self: flex-start; margin-top: 32px !important;
  padding: 10px 18px; border-radius: 999px;
  background: rgb(242 179 61 / .22); color: var(--bosque) !important; font-size: .9375rem;
}
.paso--uno::after {
  content: ""; position: absolute; z-index: -1; right: -12%; top: -14%; width: 58%; aspect-ratio: 1.1;
  border-radius: 48% 52% 38% 62% / 56% 44% 56% 44%;
  background: rgb(207 224 204 / .55);
}
.paso--dos { background: var(--salvia); }
.paso--dos .paso__num { color: var(--bosque); }
.paso--tres { background: var(--bosque); color: var(--niebla); margin-left: clamp(0px, 4vw, 56px); }
.paso--tres .paso__num { color: var(--sol); }
.paso--tres p { color: rgb(238 243 236 / .82); }


/* Enfoque */
.enfoque {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
  align-items: center;
  max-width: 1440px; margin-inline: auto;
  padding: clamp(48px, 7vw, 96px) var(--margen) clamp(80px, 10vw, 144px);
}
.enfoque__imagen { grid-column: 1 / span 5; }
html.mov .enfoque .slot--guijarro-dos { animation: eje-respira 7.5s ease-in-out infinite alternate; }
@media (min-width: 1024px) {
  html.mov .enfoque .slot--guijarro-dos { animation: eje-respira 7.5s ease-in-out infinite alternate, eje-guijarro-dos 13s ease-in-out infinite alternate; }
}
html.mov .enfoque:not(.en-pantalla) .slot--guijarro-dos { animation-play-state: paused; }
.slot--guijarro-dos {
  aspect-ratio: 1.12 / 1; border-radius: 40% 60% 56% 44% / 54% 42% 58% 46%;
  background:
    radial-gradient(ellipse 44% 44% at 18% 78%, rgb(242 179 61 / .55), transparent 72%),
    radial-gradient(ellipse 28% 26% at 20% 80%, rgb(255 224 150 / .45), transparent 70%),
    radial-gradient(ellipse 60% 60% at 88% 10%, rgb(24 58 49 / .16), transparent 72%),
    linear-gradient(200deg, #E4EEE1 0%, #CFE0CC 50%, #BCD4B6 100%);
}
.slot--guijarro-dos::before {
  background: repeating-radial-gradient(ellipse 120% 100% at 20% 80%, transparent 0 38px, rgb(251 252 248 / .4) 38px 39.2px);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 70%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 80% at 30% 70%, #000 20%, transparent 75%);
}
.enfoque__texto { grid-column: 7 / span 6; max-width: 560px; }
.enfoque__texto > p { margin-top: 20px; font-size: 1.125rem; font-weight: 300; color: var(--bosque-2); max-width: 40ch; }
.principios { margin-top: clamp(28px, 3vw, 40px); }
.principios li { padding: 16px 0; border-top: 1px solid rgb(24 58 49 / .14); font-size: 1.0625rem; }
.principios li:last-child { border-bottom: 1px solid rgb(24 58 49 / .14); }

/* Banda final */
.banda {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px clamp(40px, 6vw, 96px); align-items: end;
  max-width: calc(1440px - 2 * var(--margen)); margin: 0 var(--margen);
  padding: clamp(40px, 6vw, 88px);
  border-radius: 48px;
  background: var(--bosque); color: var(--niebla);
}
@media (min-width: 1584px) { .banda { margin-inline: auto; } }
.banda :focus-visible { outline-color: var(--sol); }
.banda__texto > p { margin-top: 16px; max-width: 38ch; font-size: 1.125rem; font-weight: 300; color: rgb(238 243 236 / .84); }
.banda .boton { margin-top: 32px; }
.banda__datos div { display: grid; grid-template-columns: 9rem 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgb(238 243 236 / .18); }
.banda__datos dt { font-size: .9375rem; color: rgb(238 243 236 / .72); }
.banda__datos dd { margin: 0; font-size: 1rem; }
.banda__forma {
  position: absolute; z-index: -1; right: -8%; top: -38%; width: 46%; aspect-ratio: 1.15;
  border-radius: 46% 54% 60% 40% / 52% 46% 54% 48%;
  background: var(--bosque-3);
}

/* Pie */
.pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  max-width: 1440px; margin-inline: auto;
  padding: 40px var(--margen) 104px;
  font-size: .9375rem; color: var(--bosque-2);
}
.pie__marca { font-weight: 600; color: var(--bosque); }

/* Tabletas */
@media (max-width: 1024px) {
  .portada__texto { grid-column: 1 / span 7; }
  .portada__imagen { grid-column: 8 / span 5; }
  .banda { grid-template-columns: 1fr; }
}

/* Móvil: una columna, la imagen arriba y la llamada sin hacer scroll */
@media (max-width: 760px) {
  .cabecera { padding-block: 16px; }
  .cabecera__nav { display: none; }
  .boton--peque { min-height: 42px; padding: 0 16px; font-size: .875rem; }
  .portada, .enfoque { grid-template-columns: 1fr; row-gap: 28px; }
  .portada { min-height: 0; padding-top: 8px; }
  .portada__texto, .portada__imagen, .enfoque__imagen, .enfoque__texto { grid-column: 1 / -1; }
  .portada__imagen { order: -1; width: 72%; margin-left: auto; margin-right: 4%; }
  .canto--sol { width: 30%; left: -16%; bottom: 10%; }
  .portada h1 { font-size: clamp(2.25rem, 10.4vw, 2.75rem); }
  .boton { min-height: 52px; }
  .pasos { grid-template-columns: 1fr; }
  .paso--uno { grid-row: auto; }
  .paso--tres { margin-left: 0; }
  .paso--uno .paso__num { font-size: 5rem; }
  .enfoque__imagen { width: 84%; }
  .banda { margin-inline: 12px; padding: 40px 24px; border-radius: 36px; }
  .banda__datos div { grid-template-columns: 1fr; gap: 2px; }
  .banda__forma { width: 80%; top: -16%; right: -30%; }
  /* El eje en un margen de 20 px: piezas más pequeñas para que no toquen el texto */
  .columna { left: 8px; }
  .vertebra { width: 8px; height: 5px; margin: -2.5px 0 0 -4px; border-radius: 3px; }
  .vertebra--mayor { width: 12px; height: 8px; margin: -4px 0 0 -6px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--salvia-2); }
  .vertebra--mayor.encendida { box-shadow: inset 0 0 0 1.5px var(--bosque), 0 4px 10px -4px rgb(150 100 10 / .7); }
  html.mov .columna__punta { left: -2.5px; top: -4px; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--niebla); }
}
@media (max-width: 420px) {
  .marca__apellido { display: none; }
}



/* Firma de WEBO: el gris del pie ya es suave, así que se apaga menos para mantener el contraste AA */
.firma-webo { opacity: .92; }