/* ═══════════════════════════════════════════════════════════
   TEMA — Rango, kinesiología y rehabilitación

   Oscuro y FRÍO, al revés que el hotel. La salud del movimiento se
   vende con lenguaje de medición: azul de instrumental, cian de
   pantalla, cero calidez de spa. Si esta demo se pareciera a la de
   estética, las dos perderían.

   Por qué oscuro en un rubro de salud, que casi siempre va en blanco:
   el fondo son partículas encendidas sobre una trama de datos, y una
   partícula encendida sobre blanco no existe. Encima despega a la
   demo de odontología, que es la que sí va en blanco clínico.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:          #0C1420;
  --bg-2:        #101A29;
  --surface:     #142032;
  --surface-2:   #1B2B41;
  --line:        rgba(226,238,252,.11);
  --line-strong: rgba(226,238,252,.24);

  --text:        #E8F1FB;
  --text-2:      #B4C6DC;
  --muted:       #7C90A8;

  --accent:      #4FD1C5;
  --accent-2:    #7DE8DC;
  --accent-deep: #2A9D92;
  --on-accent:   #06121B;
  --glow:        rgba(79,209,197,.34);
  --glow-soft:   rgba(79,209,197,.11);

  --vidrio:        linear-gradient(165deg,rgba(226,238,252,.075),rgba(226,238,252,.02));
  --vidrio-fuerte: linear-gradient(165deg,rgba(226,238,252,.13),rgba(226,238,252,.045));
  --campo-bg:      rgba(12,20,32,.55);

  --tracking-h:  -.022em;
  /* Esquinas apenas redondeadas: ni el canto vivo de la odontología ni
     la píldora de la estética. Redondeo de equipamiento médico. */
  --radius:      6px;
  --radius-sm:   4px;
  --radius-pill: 999px;

  --sh-depth: 0 8px 34px rgba(0,0,0,.66);
  --sh-lit:   0 0 26px rgba(79,209,197,.30);
  --sh-hover: 0 0 24px rgba(125,232,220,.8);
  --sh-suave: 0 2px 14px rgba(0,0,0,.55);
  --sombra-panel: 0 40px 90px -60px #000;

  /* La viñeta cierra en el azul de la paleta, no en negro: si cerrara
     en negro puro aparecería un agujero gris en las esquinas contra
     este fondo, que es azul y no neutro. */
  --grano-op: .055;
  --vineta: radial-gradient(125% 96% at 50% 42%, transparent 44%, rgba(3,8,16,.56) 100%);
}

/* El fondo vivo son las partículas: la mancha estática de respaldo se
   baja para que no compitan dos fondos a la vez. */
.bg-static{ opacity:.55 }
.hero__grid{ display:none }

/* ── Tipografía ──
   La serif sólo en los <em>. En un rubro clínico el titular tiene que
   leerse rápido; el adorno va en una palabra, no en la frase. */
.h1{ font-weight:500; line-height:1.04 }
.h1 em, .h2 em{ color:var(--accent-2) }
.h2{ font-weight:500; max-width:19ch }
.lead{ max-width:58ch }
.eyebrow{ color:var(--accent); letter-spacing:.18em }

/* ── Hero ──
   La foto entra abajo, a todo el ancho, con la nube de partículas
   pasando por delante y por detrás del texto. */
.hero{ padding-top:calc(var(--header-h) + clamp(3rem,9vh,6rem)) }
.hero__banda img{ filter:saturate(.9) contrast(1.04) brightness(.92) }

/* Las fotos de este rubro vienen casi todas en salas blancas. Sobre un
   fondo oscuro, una foto blanca es un cartel de luz: se la enfría y se
   le baja el brillo para que se apoye en la página en vez de flotar. */
.galeria img, .hero__media img{
  filter:saturate(.86) brightness(.88) contrast(1.06);
}

/* ── Las credenciales, como lectura de instrumental ── */
.credenciales b{
  font-variant-numeric:tabular-nums;
  color:var(--accent-2);
  letter-spacing:-.02em;
}

/* ── Tarjetas ──
   Con una línea de acento arriba que se enciende al pasar. Es el gesto
   más barato que existe para que una grilla no se vea a tabla. */
.tarjeta{ position:relative; overflow:hidden }
.tarjeta::before{
  content:''; position:absolute; inset:0 auto auto 0;
  width:100%; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
@media (hover:hover){ .tarjeta:hover::before{ transform:scaleX(1) } }

/* ── Los pasos: la línea de tiempo del tratamiento ── */
.paso__punto{ box-shadow:0 0 0 4px rgba(79,209,197,.14) }

/* ── El formulario ── */
.form{ backdrop-filter:blur(6px) }

/* ── El reflejo de los títulos ──
   El turquesa del instrumental cruzando el titular. Es el reflejo más
   lento de las seis demos, y a propósito: acá el movimiento tiene que
   pasar casi desapercibido. Va también en el <h1>, que es el único
   hero del sistema sin efecto propio —el rubro no admite que las
   letras salten, pero sí que la luz las recorra—. */
.reflejo{
  --rf-1: var(--text);
  --rf-2: var(--accent-2);
  --rf-3: var(--text);
  --rf-luz: 8s;
}

/* ── Las seis tarjetas que giran ──
   El frente deja de ser el vidrio gris del sistema y pasa a ser vidrio
   VERDE AGUA: el turquesa del tema, muy diluido, sobre el azul de
   instrumental. Es el único color de la paleta y hasta ahora sólo
   aparecía en filetes de un píxel y en los <em>; acá pasa a ocupar
   superficie, que es lo que hace que la grilla deje de leerse gris.

   ⚠ 16 % de turquesa y no más. A partir de 22 % el texto secundario
   —que es un azul claro desaturado— empieza a pelearse con el fondo, y
   a partir de 25 % la tarjeta se lee como un aviso y no como un dato.
   El vidrio del sistema va ENCIMA, así que el turquesa es lo que se ve
   por debajo y no lo que tiñe la letra. */
.tarjeta-gira{
  --gira-fondo:rgba(79,209,197,.16);
  --gira-color:var(--accent);
  --gira-tinta:#06121B;
}
.tarjeta-gira .gira__frente{
  border-color:rgba(79,209,197,.30);
  /* Una línea de luz turquesa en el borde de arriba. Es lo que hace que
     el 16 % se lea como vidrio y no como un gris con tinte: sin un
     reflejo en el canto, una superficie translúcida parece pintada. */
  box-shadow:inset 0 1px 0 rgba(125,232,220,.28);
}
/* El dorso, en turquesa pleno con tinta casi negra: es el color más
   claro de la paleta sobre el fondo más oscuro de las seis demos, así
   que el golpe se ve de lejos. */
.gira__dorso h4{ font-weight:600; letter-spacing:-.025em }