/* ===========================================================================
   TEDSCOPE — sitio público. Una hoja de estilo, sin framework y sin compilar.
   ---------------------------------------------------------------------------
   DE DÓNDE SALE ESTE ASPECTO. De nabla.com, que Edric eligió (sep 2026) y que
   resuelve el mismo problema que nosotros: vender software clínico a médicos sin
   parecer una startup. Lo que se toma:

     · FONDO CLARO Y MUCHO AIRE. Nada de portada oscura: el oscuro se reserva
       para el pie y para una sola banda.
     · FOTOGRAFÍA DE CONSULTA, grande y con esquinas muy redondeadas, arriba de
       cada tarjeta. Es lo que hace que la página parezca de un producto real y
       no de una plantilla.
     · TITULARES DE DOS FRASES CON PUNTO —«Smarter clinical workflows. Elevated
       care.»— y un subtítulo que habla del BENEFICIO, no de la función.
     · Tipografía grande, peso 700, interletrado cerrado, y párrafos cortos.

   Lo que NO se toma: su paleta. Aquí manda el manual de marca — una sola tinta
   navy sobre papel, y los colores de estado solo para señal clínica.

   LAS FOTOS SON RANURAS. Mientras no haya archivo en /img, cada hueco enseña un
   degradado de marca con su rótulo, no un icono roto: la página se puede
   publicar y enseñar antes de tener la sesión de fotos.
   =========================================================================== */

:root {
  --navy: #17223d;
  --navy-alto: #1d2a4a;
  --navy-80: rgba(23, 34, 61, .78);
  --navy-55: rgba(23, 34, 61, .55);
  --line: rgba(23, 34, 61, .12);
  --paper: #fbfbf9;
  --paper-80: rgba(251, 251, 249, .8);
  --paper-55: rgba(251, 251, 249, .55);
  --paper-line: rgba(251, 251, 249, .16);
  --surface: #f2f2ee;
  --info: #0099a0;
  --moderate: #b6753b;
  --severe: #c06a64;
  --display: Chivo, Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ui: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --curva: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: #fff; color: var(--navy);
  font-family: var(--ui); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.env { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---------- Barra superior: clara y fija ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 20px; height: 92px; }
/* EL LOGOTIPO MANDA EN LA CABECERA. Iba del tamaño de los enlaces de al lado y
   se perdía; es la única marca que hay en toda la página. */
.marca { display: flex; align-items: center; gap: 13px; text-decoration: none;
  font-family: var(--display); font-size: 31px; letter-spacing: -.015em; color: var(--navy); }
.marca svg { width: 40px; height: 40px; }
.marca b { font-weight: 700; } .marca span { font-weight: 300; }
.top-sp { flex: 1; }
.lang { font-size: 14.5px; color: var(--navy-55); text-decoration: none; }
.lang:hover { color: var(--navy); }

/* ---------- Botones ---------- */
.btn { display: inline-block; padding: 13px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--navy); background: var(--navy); color: #fff;
  transition: background .2s var(--curva), color .2s var(--curva), border-color .2s var(--curva); }
.btn:hover { background: var(--navy-alto); border-color: var(--navy-alto); }
.btn.linea { background: transparent; color: var(--navy); border-color: var(--line); }
.btn.linea:hover { background: var(--surface); border-color: var(--navy-55); }
.oscuro .btn { background: #fff; color: var(--navy); border-color: #fff; }
.oscuro .btn:hover { background: var(--paper); }
.oscuro .btn.linea { background: transparent; color: #fff; border-color: var(--paper-line); }
.oscuro .btn.linea:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ---------- Portada ----------
   EL VÍDEO VA DETRÁS DEL TITULAR (Edric, sep 2026), como en la referencia: la
   imagen ambienta y el texto manda. Tres decisiones que lo hacen legible:

     · Un velo navy encima. Sin él, el texto blanco baila sobre lo que se mueva
       en el vídeo y se vuelve ilegible medio segundo de cada dos.
     · Si NO hay archivo, queda el degradado de marca. La portada nunca se ve
       rota mientras no haya grabación.
     · El vídeo va mudo, en bucle y `playsinline`: en el teléfono, un vídeo con
       sonido o que abre a pantalla completa es una emboscada. */
.hero { position: relative; min-height: 640px; display: flex; align-items: center;
  padding: 190px 0 120px; text-align: center; color: #fff; overflow: hidden;
  background: linear-gradient(150deg, #1d2a4a 0%, #17223d 55%, #0f1729 100%); }
.hero-media { position: absolute; inset: 0; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El velo: más oscuro abajo, donde vive el texto. */
.hero::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,41,.55) 0%, rgba(15,23,41,.72) 60%, rgba(15,23,41,.86) 100%); }
.hero-in { position: relative; z-index: 2; }
.hero h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(38px, 6.2vw, 76px); line-height: 1.02; margin: 0 auto 24px; max-width: 14em; }
.hero h1 em { font-style: normal; color: rgba(255,255,255,.62); }
.hero .lead { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: rgba(255,255,255,.82);
  margin: 0 auto 36px; max-width: 30em; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-55); margin: 0 0 24px; }

/* ---------- La barra sobre la portada oscura ----------
   ⚠ DOS FALLOS QUE ESTO ARREGLA (Edric, sep 2026):

   1. LA BARRA NO SE PONÍA ENCIMA DEL VÍDEO. Era `sticky`, así que ocupaba su
      sitio en el flujo y la portada empezaba DEBAJO: quedaba una franja blanca
      arriba con el logotipo blanco encima — es decir, invisible. Sobre la
      portada la barra pasa a `fixed` y flota sobre el vídeo.
   2. «VER CÓMO FUNCIONA» ERA NAVY SOBRE NAVY. El botón de línea hereda el
      color de texto oscuro, que sobre el vídeo no se ve. Aquí se invierte.

   Todo esto va colgado de `.con-portada`, no de `.top` a secas: el
   recorrido y la página en inglés no tienen vídeo y su barra sigue siendo la
   clara de siempre. */
.con-portada .top { position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom: 0; backdrop-filter: none; }
.con-portada .top .marca { color: #fff; }
.con-portada .top .lang { color: rgba(255,255,255,.66); }
.con-portada .top .lang:hover { color: #fff; }
.con-portada .top .btn { background: #fff; color: var(--navy); border-color: #fff; }
.con-portada .top .btn:hover { background: var(--paper); }
/* Al dejar atrás la portada, la barra recupera el fondo claro. */
.con-portada .top.pegada { background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line); backdrop-filter: saturate(180%) blur(12px); }
.con-portada .top.pegada .marca { color: var(--navy); }
.con-portada .top.pegada .lang { color: var(--navy-55); }
.con-portada .top.pegada .lang:hover { color: var(--navy); }
.con-portada .top.pegada .btn { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Los botones DENTRO de la portada, sobre el vídeo. */
.hero .btn { background: #fff; color: var(--navy); border-color: #fff; }
.hero .btn:hover { background: var(--paper); }
.hero .btn.linea { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.45); }
.hero .btn.linea:hover { background: rgba(255,255,255,.18); border-color: #fff; }

/* ---------- Ranura de foto ----------
   Mientras no exista el archivo, se ve el degradado y el rótulo; en cuanto se
   pone la imagen, la tapa. Así la página nunca enseña un hueco roto. */
.foto { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(150deg, #1d2a4a 0%, #17223d 55%, #0f1729 100%); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-55); }
.foto img + figcaption { display: none; }

/* ---------- Cifras ---------- */
.cifras { padding: 70px 0 10px; }
.cifras-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.cifra b { display: block; font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 4.4vw, 52px); line-height: 1; letter-spacing: -.03em; }
.cifra span { display: block; margin-top: 12px; font-size: 14.5px; color: var(--navy-55); line-height: 1.45; }

/* ---------- Secciones ---------- */
section { padding: 96px 0; }
section.tinta { background: var(--paper); }
.sec-h { max-width: 44em; margin-bottom: 52px; }
h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(28px, 3.8vw, 46px); line-height: 1.1; margin: 0 0 16px; max-width: 15em; }
h2 em { font-style: normal; color: var(--navy-55); }
.sec-h p { color: var(--navy-80); margin: 0; font-size: 17.5px; max-width: 38em; }

/* Tarjetas con foto arriba, como las de «Every clinical workflow, covered». */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tj { display: flex; flex-direction: column; }
.tj .foto { border-radius: 20px; margin-bottom: 22px; }
/* ---------- «Toda la consulta»: lista a un lado, pantalla al otro ----------
   DE LA REFERENCIA (Edric, sep 2026). Tres cuadritos con una escena diminuta
   dentro no dejaban ver nada; aquí la lista ocupa una columna estrecha y la
   pantalla se queda con el resto. Solo el momento activo abre su explicación:
   tres párrafos a la vez son tres cosas que leer antes de mirar. */
.wf { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: 60px; align-items: center; }
.wf-txt { min-width: 0; }
.wf-intro { color: var(--navy-80); margin: 0 0 40px; font-size: 17.5px; max-width: 30em; }
.wf-lista { display: flex; flex-direction: column; gap: 4px; }
.wf-item { display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-left: 2px solid transparent; padding: 14px 0 14px 20px; cursor: pointer; }
.wf-item b { display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.2; color: var(--navy-55);
  transition: color .3s var(--curva); }
.wf-item p { margin: 10px 0 0; font-size: 15.5px; color: var(--navy-80); max-width: 26em;
  display: none; }
.wf-item:hover b { color: var(--navy-80); }
.wf-item.on { border-left-color: var(--navy); }
.wf-item.on b { color: var(--navy); }
.wf-item.on p { display: block; }

.wf-media { position: relative; min-height: 530px; }
.wf-pant { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--curva);
  pointer-events: none; }
.wf-pant.on { opacity: 1; }
.wf-pant iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 980px) {
  .wf { grid-template-columns: 1fr; gap: 34px; }
  .wf-media { min-height: 340px; }
}
.tj h3 { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0 0 10px; }
.tj p { margin: 0; color: var(--navy-80); font-size: 15.5px; line-height: 1.6; }
.tj .fuente { display: block; margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--navy-55); }

/* Cuatro promesas sin imagen, con filete arriba. */
.promesas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.pr { border-top: 1px solid var(--navy); padding-top: 20px; }
.pr h3 { font-family: var(--display); font-size: 17.5px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.pr p { margin: 0; font-size: 15px; color: var(--navy-80); line-height: 1.55; }
.oscuro .pr { border-top-color: var(--paper-line); }
.oscuro .pr p { color: var(--paper-80); }

/* Banda oscura: una sola en toda la página, para lo que hay que creer. */
.banda { background: var(--navy); color: #fff; }
.banda h2, .banda h3 { color: #fff; }
.banda h2 em { color: var(--paper-55); }
.banda .sec-h p { color: var(--paper-80); }

/* Cierre */
.contacto { text-align: center; }
.contacto h2 { margin: 0 auto 16px; }
.contacto p { color: var(--navy-80); max-width: 32em; margin: 0 auto 30px; }
.correo { font-family: var(--mono); font-size: 18px; text-decoration: none; border-bottom: 1px solid var(--line); }
.correo:hover { border-bottom-color: var(--navy); }

footer { background: var(--navy); color: var(--paper-55); padding: 46px 0 56px; font-size: 13.5px; }
footer a { color: var(--paper-80); }
footer .f-in { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; }
footer .aviso { flex-basis: 100%; margin: 16px 0 0; line-height: 1.55; max-width: 54em; }

/* ---------- Dibujos clínicos (los usa también el recorrido) ---------- */
.orb-hueso { fill: none; stroke: rgba(23,34,61,.22); stroke-width: 7; stroke-linecap: round; }
.orb-abierta { stroke: var(--navy); }
.orb-mus { fill: rgba(192,106,100,.35); }
.orb-nerv { fill: #e9c65c; stroke: #a8801f; stroke-width: 1; }
.orb-lbl { font-family: var(--mono); font-size: 11px; fill: rgba(23,34,61,.55); text-anchor: middle; }
.orb-lbl.on { fill: var(--navy); font-weight: 700; }
.orb-grasa { fill: #f7ecce; }
.orb-vacia { fill: #fff; }
.chip { font-family: var(--mono); font-size: 12px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--navy-80); background: #fff; }
.chip.act { border-color: rgba(182,117,59,.4); color: var(--moderate); }
.chip.sev { border-color: rgba(192,106,100,.4); color: var(--severe); }
.chip.ref { border-color: rgba(0,153,160,.4); color: var(--info); }

/* ---------- Movimiento ----------
   Sobrio, como el de la referencia: entra desde abajo y se asienta. Sin
   desenfoques ni paralajes; lo que hace cara a una página como esta es el aire
   y la fotografía, no el efecto. */
.rv { opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--curva), transform .8s var(--curva); }
.rv.on { opacity: 1; transform: none; }
.r1 { transition-delay: .08s; } .r2 { transition-delay: .16s; } .r3 { transition-delay: .24s; }
.r4 { transition-delay: .32s; } .r5 { transition-delay: .40s; } .r6 { transition-delay: .48s; }

@media (max-width: 980px) {
  .tarjetas { grid-template-columns: 1fr; }
  .promesas { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .cifras-in { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  section { padding: 64px 0; }
  .hero { min-height: 480px; padding: 150px 0 80px; }
}
@media (max-width: 620px) {
  .promesas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.on { opacity: 1; transform: none; transition: none; }
}