/* ═══════════════════════════════════════════════════════════════════════════
   «Tu consulta» — la portada personalizada (vista previa, 4-oct-2026).

   Hereda TODO de la landing (landing.css + landing-paginas.css): el fondo azul
   que se mueve, Inter, la barra, el riel verde. Aquí sólo vive lo nuevo, con
   los valores de la marca escritos igual que en landing.css:
     azul #1B7BD6 / #1565B8 · verde #54B948 / #449438 · tinta #0F172A
     títulos en 900 con -0.035em · la retícula de la ruta (46 px, azul 5.5 %)
     los tonos por paso de la portada de antes (home.html, retirada el
     5-oct-2026: desde ese día esta página ES la portada).

   Tres medidas mandan el diseño:
     · 820 px: de ahí para arriba, texto a la izquierda y escenario fijo a la
       derecha (laptop y Fold abierto). Abajo, escenario fijo ARRIBA y el
       texto pasa por debajo (Fold cerrado, celulares).
     · --tc-nav: alto real de la barra superior (lo mide el JS).
     · --p: qué tanto has bajado dentro del momento activo (0 → 1). Sin JS
       vale 1 y todo se ve terminado.
   ═══════════════════════════════════════════════════════════════════════ */

.tc, .tc-cierre { --tc-nav: 72px; --tc-azul: #1B7BD6; --tc-azul-o: #1565B8; --tc-verde: #54B948; --tc-verde-o: #449438; --tc-tinta: #0F172A; --tc-gris: #475569; }
.tc *, .tc *::before, .tc *::after { box-sizing: border-box; }
.tc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ── 1 · Bienvenida ───────────────────────────────────────────────────── */
/* La bienvenida (4-oct-2026: que no ocupe tanto espacio pero que dé
   presencia de marca): el saludo en un
   renglón, la marca en el segundo, y qué es MyDoctorDiary en una frase. */
.tc-hero {
  position: relative; z-index: 3; color: #fff;
  /* El buscador de especialidad abre su lista HACIA ABAJO y puede pasar el
     borde del hero: se recorta sólo a los lados (el ECG es más ancho). */
  overflow: hidden;
  min-height: max(600px, calc(100svh - 112px));
  display: grid; place-items: center;
  padding: 48px 24px 112px;
  --tc-ecg-y: 30%;
}
@supports (overflow: clip) { .tc-hero { overflow: clip visible; } }

/* El latido. UN reloj para el ECG y el botón: 1.2 s por latido (50 lpm).
   El trazo tiene 20 ciclos idénticos y `pathLength="1"`, así que un ciclo
   mide 0.05. El pulso brillante es un guion de 0.2 ciclos que avanza un ciclo
   por latido; pasa por el pico R (al 38.7 % de cada ciclo, medido sobre la
   curva) a los ~0.24 s de cada latido, y ahí late el botón (20 %).
   Cada 4 ciclos hay un pulso (en celular cada 3, porque cabe menos trazo):
   cualquiera de ellos cruza su pico en el mismo instante. */
.tc-ecg {
  position: absolute; z-index: 0; left: 50%; top: var(--tc-ecg-y);
  width: 2850px; height: 150px; transform: translate(-50%, -64%);
  pointer-events: none;
}
.tc-ecg-base { fill: none; stroke: rgba(139,224,124,.42); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tc-ecg-pulso {
  fill: none; stroke: #9BEA8C; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: .01 .19; stroke-dashoffset: .2;
  filter: drop-shadow(0 0 6px rgba(139,224,124,.95));
  animation: tcPulso4 4.8s linear infinite;
}
@keyframes tcPulso4 { from { stroke-dashoffset: .2; } to { stroke-dashoffset: 0; } }
@keyframes tcPulso3 { from { stroke-dashoffset: .15; } to { stroke-dashoffset: 0; } }

.tc-hero-in { position: relative; z-index: 2; width: 100%; max-width: 980px; text-align: center; }

/* La marca: los logos de la barra, con un contorno blanco para que el azul
   se lea sobre el azul (Francisco: «MyDoctor en azul con contorno blanco
   para que se vea»). Son cuatro sombras sin desenfoque: un trazo, no un halo. */
.tc-logo { margin: 0 0 26px; display: flex; align-items: center; justify-content: center; gap: 12px; animation: tcSube .8s cubic-bezier(.2,.7,.2,1) both; }
/* Un halo blanco de 1 px, no un trazo: el contorno grueso «se ve horrible»
   (Francisco, 4-oct-2026). Basta para que el azul no se pierda en el azul. */
.tc-logo img { display: block; height: auto; filter: drop-shadow(0 0 .8px rgba(255,255,255,.95)) drop-shadow(0 0 .8px rgba(255,255,255,.95)) drop-shadow(0 4px 12px rgba(0,0,0,.18)); }
.tc-logo-mark { width: 62px; }
.tc-logo-txt { width: 260px; }

.tc-saludo {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px;
  animation: tcSube .8s cubic-bezier(.2,.7,.2,1) both;
}
.tc-hola, .tc-nombre, .tc-nombre-espejo {
  font-family: inherit; font-weight: 900; letter-spacing: -0.035em; line-height: 1.1;
  font-size: clamp(38px, 5vw, 70px);
}
.tc-hola { margin: 0; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.18); }

/* Dr. / Dra.: una gota que se estira hacia donde vas y luego te alcanza.
   El borde de adelante corre rápido y con rebote; el de atrás llega tarde.
   Así se ve un líquido, no una pastilla que se desliza. */
.tc-trato {
  position: relative; display: inline-flex; flex: none; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tc-trato-gota {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: var(--l, 5px); right: var(--r, 50%);
  border-radius: 999px; pointer-events: none;
  background: radial-gradient(120% 140% at 30% 20%, #fff 0%, #fff 55%, #E8F2FF 100%);
  box-shadow: 0 6px 20px rgba(0,0,0,.2), inset 0 -2px 0 rgba(21,101,184,.08);
  opacity: 0; transform: scale(.4);
  transition: left .5s cubic-bezier(.6,0,.2,1), right .5s cubic-bezier(.6,0,.2,1), opacity .25s, transform .45s cubic-bezier(.3,1.6,.5,1);
}
.tc-trato.con-gota .tc-trato-gota { opacity: 1; transform: none; }
.tc-trato.va-der .tc-trato-gota { transition: right .34s cubic-bezier(.3,1.45,.55,1), left .6s cubic-bezier(.75,0,.25,1) .07s, opacity .25s, transform .45s; }
.tc-trato.va-izq .tc-trato-gota { transition: left .34s cubic-bezier(.3,1.45,.55,1), right .6s cubic-bezier(.75,0,.25,1) .07s, opacity .25s, transform .45s; }
.tc-trato.chapotea .tc-trato-gota { animation: tcChapoteo .62s ease-out; }
@keyframes tcChapoteo {
  0% { border-radius: 999px; }
  30% { border-radius: 40% 60% 60% 40% / 70% 50% 50% 70%; transform: scaleY(.84); }
  62% { border-radius: 60% 40% 45% 55% / 45% 60% 40% 55%; transform: scaleY(1.06); }
  100% { border-radius: 999px; transform: none; }
}
.tc-trato button {
  position: relative; z-index: 1;
  min-height: 52px; min-width: 66px; padding: 0 20px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.9); cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: clamp(19px, 1.9vw, 24px); line-height: 1; letter-spacing: -0.01em;
  transition: color .3s .05s;
}
.tc-trato button:hover:not(.on) { color: #fff; }
.tc-trato button.on { color: var(--tc-azul-o); }
.tc-trato button:focus-visible { outline: 3px solid #8BE07C; outline-offset: 2px; }

.tc-nombre-fila { display: inline-flex; align-items: center; max-width: 100%; }
.tc-nombre-caja { position: relative; display: inline-flex; max-width: 100%; min-width: 0; }
.tc-nombre {
  max-width: 100%; min-width: 0; height: 1.32em; padding: 0 .26em; margin: 0;
  color: #9BEA8C; caret-color: #fff; text-align: center;
  background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.34); border-radius: .3em; outline: none;
  text-shadow: 0 2px 24px rgba(0,0,0,.18);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.tc-nombre::placeholder { color: rgba(255,255,255,.5); }
.tc-nombre:focus { border-color: #fff; background: rgba(255,255,255,.16); box-shadow: 0 0 0 4px rgba(139,224,124,.35); }
.tc-nombre.lleno { border-color: rgba(155,234,140,.7); }
.tc-nombre-espejo { position: absolute; visibility: hidden; white-space: pre; padding: 0 .26em; left: -9999px; top: 0; }
/* El autocompletado del navegador (Francisco, 4-oct-2026, con Chrome: «al
   usar el completado automático del nombre veo este bug visual»). Chrome
   pinta el campo autocompletado con su propio fondo azul pálido y letra
   negra, y la vista previa (al pasar el ratón por la sugerencia) con una
   letra de sistema chiquita que, con nuestro espaciado negativo, se
   enciman. Se le devuelven el color, el fondo y la tipografía del campo. */
.tc-nombre:-webkit-autofill, .tc-nombre:-webkit-autofill:hover, .tc-nombre:-webkit-autofill:focus {
  -webkit-text-fill-color: #9BEA8C; caret-color: #fff;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.tc-nombre:-webkit-autofill::first-line { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }

/* La especialidad, con buscador (48 del catálogo del registro). */
.tc-fila-esp {
  /* Encima de lo que sigue: la lista del buscador se abre sobre el botón. */
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 28px;
  font-weight: 700; font-size: clamp(19px, 2vw, 26px); letter-spacing: -0.02em; color: rgba(255,255,255,.92);
  animation: tcSube .8s cubic-bezier(.2,.7,.2,1) .14s both;
}
.tc-combo { position: relative; width: min(420px, 100%); }
.tc-combo-in {
  width: 100%; min-height: 58px; padding: 0 52px 0 50px; border: 2px solid transparent; border-radius: 14px;
  background: #fff; color: var(--tc-azul-o); box-shadow: 0 10px 30px rgba(0,0,0,.22); outline: none;
  font-family: inherit; font-weight: 800; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.1; letter-spacing: -0.02em;
  text-overflow: ellipsis;
}
.tc-combo-in::placeholder { color: #94A3B8; font-weight: 700; }
.tc-combo-in:focus { border-color: #8BE07C; box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 0 0 4px rgba(139,224,124,.35); }
.tc-combo.elegida .tc-combo-in { border-color: rgba(84,185,72,.55); }
.tc-combo-lupa { position: absolute; left: 17px; top: 50%; width: 22px; height: 22px; margin-top: -11px; fill: none; stroke: var(--tc-azul); stroke-width: 2.6; stroke-linecap: round; pointer-events: none; }
.tc-combo-abre { position: absolute; right: 6px; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.tc-combo-abre:hover { background: #EFF6FF; }
.tc-combo-abre svg { width: 22px; height: 22px; fill: none; stroke: var(--tc-azul-o); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.tc-combo.abierto .tc-combo-abre svg { transform: rotate(180deg); }
.tc-combo-lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px);
  max-height: min(300px, 48vh); overflow-y: auto; overscroll-behavior: contain;
  list-style: none; margin: 0; padding: 6px; border-radius: 14px; text-align: left;
  background: #fff; color: var(--tc-tinta); box-shadow: 0 24px 60px -12px rgba(11,18,32,.5), 0 0 0 1px rgba(15,23,42,.06);
  letter-spacing: 0;
}
.tc-combo-lista[hidden] { display: none; }
.tc-combo-lista [role="option"] {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  font-size: 16px; font-weight: 600; line-height: 1.3;
}
.tc-combo-lista [role="option"][hidden] { display: none; }
.tc-combo-lista [role="option"].activa { background: #EFF6FF; color: var(--tc-azul-o); }
.tc-combo-lista [role="option"][aria-selected="true"] { font-weight: 800; color: var(--tc-azul-o); }
.tc-combo-lista [role="option"][aria-selected="true"]::after {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: #22C55E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.tc-op-txt { min-width: 0; }
/* Lo que coincide, en negritas dentro de la misma palabra, como en cualquier
   buscador. */
.tc-combo-lista mark { background: none; color: inherit; font-weight: 800; }
.tc-combo-nada { padding: 12px; font-size: 15px; color: #64748B; }

/* Lo obligatorio, dicho con calma (Francisco, 4-oct-2026: el aviso rojo «se
   ve demasiado agresivo»). Nada de rojo ni sacudidas: el campo que falta se
   ilumina dos veces y una pista blanca dice qué falta. */
.tc-nombre.tc-falta, .tc-combo.tc-falta .tc-combo-in { animation: tcLlama 1.1s ease-out 2; }
@keyframes tcLlama {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); }
  100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}
.tc-error {
  margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 14.5px; font-weight: 600; line-height: 1.35; text-align: left;
  animation: tcAparece .35s ease-out;
}
.tc-error::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BEA8C' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tc-error[hidden] { display: none; }
@keyframes tcAparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tc-acciones { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; animation: tcSube .8s cubic-bezier(.2,.7,.2,1) .2s both; }

/* El botón que late. Blanco, con las MISMAS esquinas que el buscador, y en
   cada latido se ilumina de un verde ligero (Francisco, 4-oct-2026: «en lugar
   de cambiar completamente de color, cambia a un ligero verde iluminado»).
   Mismo reloj que el ECG: un latido cada 1.2 s; el «lub» cuando el pulso pasa
   por el pico (20 %) y el «dub» 0.2 s después. El brillo va en un ::before y
   sólo anima su opacidad (y el botón su escala): las dos cosas las mueve la
   tarjeta de video, sin repintar —que en Windows y en celulares modestos es
   lo que da tirones—. No lleva retraso: el ECG y el botón empiezan juntos. */
.tc-btn-latido {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; min-width: 300px; padding: 0 32px;
  border-radius: 14px; border: 0; color: var(--tc-azul-o); text-decoration: none;
  font-size: 18.5px; font-weight: 800; letter-spacing: -0.01em;
  background: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.26);
  animation: tcBtnLatido 1.2s linear infinite;
  -webkit-tap-highlight-color: transparent;
}
.tc-btn-latido > * { position: relative; z-index: 1; }
.tc-btn-latido::before {
  content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(220,252,214,.95), rgba(196,244,186,.95));
  box-shadow: 0 0 0 3px rgba(155,234,140,.55), 0 0 30px 4px rgba(139,224,124,.55);
  opacity: 0; animation: tcBtnBrillo 1.2s linear infinite;
}
.tc-btn-latido::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(155,234,140,.8); pointer-events: none;
  animation: tcBtnOnda 1.2s linear infinite;
}
.tc-btn-latido svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tc-btn-latido:hover { box-shadow: 0 16px 40px rgba(0,0,0,.32); }
.tc-btn-latido:focus-visible { outline: 3px solid #8BE07C; outline-offset: 4px; }
@keyframes tcBtnLatido {
  0%, 18% { transform: scale(1); }
  20%     { transform: scale(1.045); }
  27%     { transform: scale(1); }
  36.7%   { transform: scale(1.025); }
  45%, 100% { transform: scale(1); }
}
@keyframes tcBtnBrillo {
  0%, 18% { opacity: 0; }
  20%     { opacity: .85; }
  30%     { opacity: .45; }
  36.7%   { opacity: .7; }
  62%, 100% { opacity: 0; }
}
@keyframes tcBtnOnda {
  0%, 19% { opacity: 0; transform: scale(1); }
  20% { opacity: .6; transform: scale(1); }
  55% { opacity: 0; transform: scale(1.08, 1.3); }
  100% { opacity: 0; transform: scale(1.08, 1.3); }
}

/* Del MISMO tamaño que «Empezar mi recorrido» (Francisco, 4-oct-2026); se
   distingue por ser de contorno, no por ser más chico. */
.tc-btn-registro {
  display: inline-flex; align-items: center; justify-content: center; min-height: 60px; min-width: 300px; padding: 0 32px;
  border-radius: 14px; border: 2px solid rgba(255,255,255,.75); color: #fff; text-decoration: none;
  font-size: 18.5px; font-weight: 800; letter-spacing: -0.01em; transition: background-color .2s, border-color .2s;
}
.tc-btn-registro:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.tc-btn-registro:focus-visible { outline: 3px solid #8BE07C; outline-offset: 3px; }

/* Antes de «Empezar mi recorrido» la página es sólo el hero (Francisco,
   4-oct-2026: «no debemos permitir el scroll hasta que el usuario ponga su
   nombre, especialidad y dé botón en Empezar mi recorrido»). Lo de abajo NO se
   quita con display:none: se aplasta a alto cero y queda invisible, así el
   navegador ya lo tiene armado —capturas bajadas, la curva de la flecha
   calculada— y al abrirse corre fluido. Sin JS esta clase nunca se pone y la
   página se lee entera. */
/* 5-oct-2026 · Desde que esta página ES la portada, el pie NO se aplasta:
   trae el aviso de privacidad, los términos, el contacto y el resto de las
   páginas, y la portada no puede esconderle eso a quien todavía no escribe su
   nombre (medido: con el pie aplastado, a 344–1440 px los cuatro enlaces
   legales quedaban con alto cero e invisibles). El día y el cierre siguen
   esperando a «Empezar mi recorrido».
   5-oct-2026 (tarde) · Las PREGUNTAS FRECUENTES tampoco se aplastan
   (Francisco: «FAQ siempre visible»). En la raíz del sitio, Google lee la
   página como la ve un visitante: con la FAQ aplastada leía casi sólo el
   saludo, y el JSON-LD FAQPage de _base.html describía respuestas que la
   página no enseñaba. Sigue sin verse el recorrido hasta dar el nombre. */
html.tc-bloqueado .tc-ruta,
html.tc-bloqueado .tc-cierre {
  height: 0 !important; min-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
  border: 0 !important; overflow: hidden !important; visibility: hidden !important;
}
html.tc-bloqueado .page-toc, html.tc-bloqueado .tc-baja { display: none !important; }
/* 5-oct-2026 (noche) · El candado de verdad (tu-consulta.js, `armarCandado`):
   quien intenta bajar sin «Empezar mi recorrido» ve al botón menearse. Toma el
   lugar del latido sólo medio segundo (los dos usan `transform`) y se va solo
   (`animationend`). Con «reducir movimiento» no se agrega la clase: quedan el
   texto de qué falta y el campo marcado. */
.tc-btn-latido.tc-empuja { animation: tcEmpuja .5s ease-in-out 1; }
.tc-btn-latido.tc-empuja::before, .tc-btn-latido.tc-empuja::after { animation: none; opacity: 0; }
@keyframes tcEmpuja {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-9px); }
  35%      { transform: translateX(8px); }
  55%      { transform: translateX(-6px); }
  75%      { transform: translateX(4px); }
}
html.tc-bloqueado .tc-hero { min-height: calc(100svh - var(--tc-arriba, 112px)); }

.tc-previa[hidden] { display: none; }
.tc-previa { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); text-align: left; }
.tc-previa::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8BE07C; box-shadow: 0 0 0 4px rgba(139,224,124,.25); }
.tc-privado { max-width: 520px; margin: 18px auto 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.76); text-wrap: balance; }

/* ── Escritorio y Fold abierto: el acomodo de la primera versión ──────────
   Francisco, 4-oct-2026: «en escritorio me gustaba más cómo se veía el acomodo
   de antes, con el electrocardiograma justo en medio, me gustaba más el hola,
   el formato para agregar tu nombre, la separación de filas, todo en
   general». Así que aquí: «Hola,» solo en su renglón, el título y el nombre
   sobre una raya punteada en el siguiente, el ECG grande cruzando a la altura
   de la especialidad (lo coloca el JS), y más aire entre filas. El celular
   se queda con su acomodo compacto. */
@media (min-width: 820px) {
  .tc-hero { padding: 48px 24px 112px; }
  .tc-logo { margin-bottom: 22px; }
  .tc-hola, .tc-nombre, .tc-nombre-espejo { font-size: clamp(46px, 7.2vw, 96px); line-height: 1.02; letter-spacing: -0.04em; }
  .tc-hola { flex-basis: 100%; }
  .tc-saludo { gap: 12px 20px; }
  .tc-nombre {
    height: auto; padding: 0 6px 6px; background: transparent; color: #8BE07C;
    border: 0; border-bottom: 4px dashed rgba(255,255,255,.5); border-radius: 0; box-shadow: none;
  }
  .tc-nombre::placeholder { color: rgba(255,255,255,.42); }
  .tc-nombre:focus { background: transparent; border-bottom-style: solid; border-bottom-color: #fff; box-shadow: none; }
  .tc-nombre.lleno { border-bottom-style: solid; border-bottom-color: rgba(139,224,124,.75); }
  .tc-nombre:-webkit-autofill, .tc-nombre:-webkit-autofill:hover, .tc-nombre:-webkit-autofill:focus { -webkit-text-fill-color: #8BE07C; }
  .tc-nombre-espejo { padding: 0 6px; }
  .tc-fila-esp { margin-top: 30px; font-size: clamp(20px, 2.3vw, 30px); }
  .tc-combo { width: min(460px, 100%); }
  .tc-combo-in { min-height: 60px; font-size: clamp(20px, 2.3vw, 30px); }
  .tc-acciones { margin-top: 38px; }
  .tc-privado { margin-top: 22px; }
  /* El ECG de antes: más alto (190 px) y con los latidos más separados. */
  .tc-ecg { width: 3610px; height: 190px; transform: translate(-50%, -50%); }
}

/* La mascota, en TODOS los tamaños (Francisco, 4-oct-2026). */
.tc-mascota { position: absolute; z-index: 1; right: max(20px, calc(50% - 660px)); bottom: 34px; width: 168px; }
.tc-mascota img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.3)); animation: tcFlota 5s ease-in-out infinite; }
.tc-globo {
  position: absolute; right: 62%; bottom: 92%; width: 220px; padding: 11px 14px;
  background: #fff; color: var(--tc-tinta); border-radius: 16px 16px 4px 16px;
  font-size: 14px; font-weight: 700; line-height: 1.35; text-align: left;
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  transition: opacity .3s;
}
@media (min-width: 1100px) {
  /* El globo va ENCIMA de la mascota: de lado tapaba el buscador. */
  .tc-mascota { width: 190px; bottom: 40px; }
  .tc-globo { right: 4%; bottom: 100%; margin-bottom: 6px; width: 210px; border-radius: 16px 16px 4px 16px; }
}

.tc-baja { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.tc-baja svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: tcRebota 1.8s ease-in-out infinite; }

@keyframes tcSube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes tcRebota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes tcFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ── 2 · Tu día: el texto avanza con la ruta, las imágenes se quedan fijas ──
   La línea, la flecha, el color de cada paso y el aterrizaje en «Empezar
   gratis» son los de la portada (landing.css → «La ruta», landing.js → su
   motor). Lo propio de aquí: las imágenes no van en cada tarjeta, viven en
   un ESCENARIO fijo que cambia cuando la flecha toca cada paso (Francisco,
   4-oct-2026: «me había gustado que el texto fuera avanzando con el scroll
   pero las imágenes fijas sólo aparecieran y desaparecieran»), y el zigzag
   se arma dentro de la columna del texto. */
.tc { --tc-nav: 72px; }
.tc-ruta .ruta-paso[hidden], .tc-esc[hidden] { display: none !important; }
.tc-kicker { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: #475569; }
.tc-kicker::first-letter { text-transform: uppercase; }
.tc-kicker strong { font-weight: 800; color: var(--tc-tinta); }
.tc-kicker strong:empty { display: none; }

/* Sin nombre o sin especialidad, el recorrido no se arma (Francisco,
   4-oct-2026: «quiero que sea obligatorio»). Sólo lo enciende el JS. */
.tc-candado {
  position: relative; z-index: 1; max-width: 560px; margin: 8px auto 40px; padding: 34px 28px; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -36px rgba(11,18,32,.45);
}
.tc-candado[hidden] { display: none; }
.tc-candado-ic { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #EFF6FF; border: 1px solid #BFDBFE; }
.tc-candado-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--tc-azul); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tc-candado-t { margin: 6px 0 0; font-size: 24px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.2; color: var(--tc-tinta); }
.tc-candado-d { margin: 0; max-width: 42ch; font-size: 16px; line-height: 1.55; color: var(--tc-gris); }
.tc-btn-azul { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 12px; background: var(--tc-azul); color: #fff; text-decoration: none; font-size: 16px; font-weight: 800; box-shadow: 0 10px 22px -10px rgba(27,123,214,.7); }
.tc-btn-azul:hover { background: var(--tc-azul-o); }

/* El relevo de la punta es instantáneo: la de la ruta se apaga en el mismo
   cuadro en que nace la de la cola, en el mismo punto (landing.js, «la cola
   que SIGUE a la ruta»). Con el desvanecido de la portada se veían dos
   puntas un instante. */
.tc-ruta .ruta-flecha { transition: none; }

/* Con el escenario fijo ENCIMA del texto (celular), la tarjeta aparece con el
   SCROLL y no con un reloj (4-oct-2026). Francisco, en su teléfono: «el texto
   aparece gradualmente al hacer scroll, pero a veces muy tarde, cuando la
   imagen ya va a cambiar». La entrada de la portada es una transición de
   .6 s; a 24 px por cuadro eso son 250–370 px de scroll, más que toda la zona
   que deja la imagen en un teléfono de 700 px. El motor (landing.js,
   `RAMPA_VER`) pone `ruta-por-scroll` en el lienzo y le da a cada paso su
   `--ruta-ver` (0 → 1) según lo cerca que va la flecha; aquí sólo se pinta.
   La opacidad y el movimiento salen de la `transition` A PROPÓSITO (si no,
   cada cuadro arrancaría otra transición de .6 s y volvería el retraso); los
   colores la conservan, con los mismos tiempos que `landing.css`. Si se añade
   una propiedad animada a la tarjeta, va también aquí. */
.tc-ruta .ruta-por-scroll.ruta-viva .ruta-paso .ruta-card {
  opacity: var(--ruta-ver, 0);
  transform: translate(calc((1 - var(--ruta-ver, 0)) * 14px), calc((1 - var(--ruta-ver, 0)) * 18px));
  transition: background-color .65s cubic-bezier(.22,1,.3,1) .06s,
              border-color .5s cubic-bezier(.22,1,.3,1),
              box-shadow .65s cubic-bezier(.22,1,.3,1);
}

/* El viaje: escenario fijo + ruta de texto. */
.tc-viaje {
  position: relative; z-index: 1; max-width: 1320px; margin: 24px auto 0; padding: 0 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); column-gap: 56px;
  --tc-esc-h: min(600px, calc(100vh - var(--tc-nav) - 64px));
}
.tc-viaje[hidden] { display: none; }
.tc-viaje .ruta-lienzo { grid-column: 1; grid-row: 1; max-width: none; width: 100%; margin: 0; padding: 0 0 12vh; }

.tc-escenario {
  grid-column: 2; grid-row: 1; align-self: start; z-index: 2;
  position: sticky; top: calc(var(--tc-nav) + (100vh - var(--tc-nav) - var(--tc-esc-h)) / 2);
  height: var(--tc-esc-h);
}
.tc-fondo {
  position: absolute; inset: 0; border-radius: 32px;
  background: radial-gradient(120% 90% at 85% 10%, rgba(255,255,255,.75), transparent 60%), var(--c-suave, #EFF6FF);
  border: 1px solid var(--c-borde, #BFDBFE);
  box-shadow: 0 40px 80px -50px rgba(11,18,32,.45);
  transition: background-color .6s, border-color .6s;
}
.tc-fondo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 85%);
  mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 85%);
}
/* Una imagen a la vez: aparece y desaparece, sin moverse de su sitio.

   El relevo es un FUNDIDO ENCADENADO (Francisco, 4-oct-2026: «el cambio de
   imágenes es muy brusco, que sea más suave»). Antes la que se iba y la que
   llegaba se desvanecían a la vez en medio segundo, con un salto de 18 px:
   a media transición las dos estaban al 50% y se veía el fondo entre ellas,
   que es lo que se leía como golpe. Ahora la nueva entra ENCIMA (z-index 2)
   en 0.9 s y la anterior se queda quieta debajo (`.sale`, z-index 1) hasta
   que la nueva ya la tapa; sólo entonces se apaga. Sin hueco y sin salto:
   apenas un asentarse de 1.5% de escala. Todo con `opacity` y `transform`,
   que el navegador mueve sin repintar. */
.tc-esc {
  position: absolute; inset: 26px; z-index: 0;
  opacity: 0; transform: scale(.985); pointer-events: none;
  transition: opacity .35s linear .8s, transform 0s linear 1.15s;
}
.tc-esc.sale { z-index: 1; }
.tc-esc.on {
  z-index: 2; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .9s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.22,1,.36,1);
}
.tc-ventana, .tc-captura {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 18px;
  box-shadow: 0 30px 60px -34px rgba(11,18,32,.45), 0 2px 6px rgba(11,18,32,.05);
}
.tc-ventana-barra { flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #F8FAFC; border-bottom: 1px solid #EEF2F7; }
.tc-ventana-barra i { width: 9px; height: 9px; border-radius: 50%; background: #E2E8F0; }
.tc-ventana-barra i:first-child { background: #FCA5A5; } .tc-ventana-barra i:nth-child(2) { background: #FCD34D; } .tc-ventana-barra i:nth-child(3) { background: #86EFAC; }
.tc-ventana-barra > span { margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 700; color: var(--tc-tinta); }
.tc-ventana-cuerpo { position: relative; flex: 1; min-height: 0; padding: 18px 20px; container-type: size; overflow: hidden; }
/* La captura real de la app (Francisco: «hace ver a la página más confiable
   porque no ocultamos el producto final»). En escritorio se amplía con clic. */
/* Se recorta por la DERECHA: la pantalla de la app empieza a la izquierda
   (el título, «Odontograma», «Modelos 3D de anatomía»), y centrada se comía
   la primera letra. */
.tc-captura picture, .tc-captura img { display: block; flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.tc-captura[data-lg] { cursor: zoom-in; }

/* El movimiento de cada escena: `--p` corre de 0 a 1 cuando su imagen entra
   (`.on`). Registrada, se anima con una transición; sin JS la primera ya
   viene `.on` y se ve terminada. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 1; }
/* Al irse, la escena NO se desarma a la vista: espera a estar tapada por la
   nueva (1.2 s) y entonces vuelve a 0 de golpe, lista para la próxima vez. */
.tc-esc .tce { --p: 0; transition: --p 0s linear 1.2s; }
.tc-esc.on .tce { --p: 1; transition: --p 2.6s cubic-bezier(.33,.08,.25,1) .3s; }
/* Lo que se mueve sin fin (el micrófono, la onda, el cursor, la red de la
   IA) sólo corre en la imagen que se ve: en un celular modesto o en Windows,
   doce animaciones a la vez es justo lo que da tirones. */
.tc-esc:not(.on) *, .tc-esc:not(.on) *::before, .tc-esc:not(.on) *::after { animation-play-state: paused !important; }

/* ── Que la flecha no se trabe (4-oct-2026) ───────────────────────────────
   Francisco: «la flecha se está laggeando mucho, tiene que verse suave en
   cualquier dispositivo». La flecha se dibuja en el hilo principal en cada
   cuadro, así que todo lo demás que también pide el hilo principal en cada
   cuadro le roba tiempo. Medido con `document.getAnimations()` a media ruta,
   seguían corriendo sin que nadie los viera:
   · el ECG del hero (anima `stroke-dashoffset` con resplandor: se repinta
     en cada cuadro) y el latido del botón, aunque el hero ya no se veía —el
     JS ya marcaba `.tc-fuera`, pero no había regla que lo pausara—;
   · el aro del micrófono y el punto de «Dictando», que son `::before` y el
     `*` de arriba no alcanza a los pseudo-elementos;
   · la rejilla del fondo de la ruta (`rutaRejilla`, landing.css), que mueve
     `background-position` de un fondo con máscara del alto de TODA la
     sección —aquí son ocho pantallas, el doble que en la portada—: 46 px en
     24 s, menos de un píxel por segundo, repintando cada cuadro; y su capa de
     luces, que obliga a tener esa capa gigante en la tarjeta de video;
   · el halo del botón y los orbes del cierre, aunque el cierre no estuviera
     en pantalla.
   El fondo de la ruta se queda quieto (la diferencia no se ve) y lo demás se
   pausa fuera de pantalla y vuelve a moverse al regresar. */
.tc-hero.tc-fuera *, .tc-hero.tc-fuera *::before, .tc-hero.tc-fuera *::after,
.tc-cierre.tc-fuera::before, .tc-cierre.tc-fuera::after,
.tc-cierre.tc-fuera *, .tc-cierre.tc-fuera *::before, .tc-cierre.tc-fuera *::after { animation-play-state: paused !important; }
.tc-ruta::before, .tc-ruta::after { animation: none; }
/* El degradado azul del fondo de la página (`pageGradientFallback`, también
   `background-position`) y la barra de aviso de arriba: sólo se ven con el
   hero en pantalla. */
body.tc-fondo-quieto, body.tc-fondo-quieto .urgency-bar, body.tc-fondo-quieto .urgency-dot { animation-play-state: paused; }

/* «La IA escribe. Tú decides»: la animación de la portada sobre su azul. */
.tc-shot-ia { height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: 18px; background: linear-gradient(150deg, #0B3D7A 0%, #1565B8 58%, #1B7BD6 100%); box-shadow: 0 30px 60px -34px rgba(11,18,32,.55); }
/* La animación cabe en el ALTO del escenario, no sólo en su ancho (4-oct-2026).
   Francisco: «una card está encimada». El SVG (viewBox 400×330) escalaba sólo
   con el ancho: a 412×700 medía 56 px más que el escenario y, como aquí nada
   recorta, se encimaba sobre la tarjeta de texto de abajo, con las pastillas.
   Ahora la caja es una columna que no pasa del alto disponible: la barra y
   las pastillas se quedan enteras y el SVG toma lo que sobra; su dibujo se
   ajusta solo dentro (`preserveAspectRatio` de fábrica: entero y centrado). */
.tc-shot-ia .ia-demo { width: 100%; max-width: 440px; max-height: 100%; display: flex; flex-direction: column; }
.tc-shot-ia .ia-demo-barra, .tc-shot-ia .tc-ia-pastillas { flex: none; }
.tc-shot-ia .ia-red { flex: 1 1 auto; min-height: 0; }
.tc-ia-pastillas { list-style: none; margin: 0; padding: 4px 12px 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tc-ia-pastillas li { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #DCEBFF; font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* El texto: tarjetas en zigzag dentro de su columna. El hito se turna de
   orilla en un canal de 110 px, y de ahí sale la curva (el motor la compone
   midiendo los hitos). Cada paso pide su alto de pantalla para que la imagen
   tenga tiempo de leerse. */
@media (min-width: 901px) {
  .tc-ruta .ruta-paso { grid-template-columns: 110px minmax(0, 1fr); min-height: 66vh; }
  .tc-ruta .ruta-paso:last-child { min-height: 52vh; }
  .tc-ruta .ruta-hito { grid-column: 1; margin-inline: 6px; }
  .tc-ruta .ruta-izq .ruta-hito { justify-self: start; }
  .tc-ruta .ruta-der .ruta-hito { justify-self: end; }
  .tc-ruta .ruta-izq .ruta-texto, .tc-ruta .ruta-der .ruta-texto { grid-column: 2; margin: 0; max-width: 540px; }
  .tc-ruta .ruta-pasos { gap: 0; }
  .tc-ruta .ruta-t { font-size: clamp(22px, 1.9vw, 27px); }
  .tc-ruta .ruta-d { font-size: 16px; }
  .tc-kicker { font-size: 16px; }
}

/* ── Las escenas (dentro de la ventana) ──────────────────────────────── */
.tce { position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; font-size: 15px; color: var(--tc-tinta); }
.tce-k { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #64748B; }
.tce-v { font-size: 16px; font-weight: 600; color: var(--tc-tinta); }
.tce-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.tce-chip.ok { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.tce-chip.ven { background: #FEFCE8; color: #A16207; border: 1px solid #FDE68A; }
.tce-chip.atr { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.tce-pie { margin: auto 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #64748B; }
.tce svg { display: block; }

/* Cada cosa entra en su turno: `--k` es su lugar en la fila, `--p` el scroll. */
.tce-pre-filas li, .tce-vac li, .tce-doc-lista li, .tce-tiles span, .tce-ia-l {
  --r: clamp(0, calc((var(--p) - var(--k) * .12) * 6), 1);
  opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 10px));
}

/* pre-consulta */
.tce-pre-cab { display: flex; align-items: center; gap: 12px; }
.tce-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-suave); color: var(--c); font-weight: 800; font-size: 15px; border: 1px solid var(--c-borde); }
.tce-pre-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tce-pre-quien strong { font-size: 16px; }
.tce-pre-quien span { font-size: 13px; color: #64748B; }
.tce-pre-filas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tce-pre-filas li { --k2: calc(var(--k) * .18 + .2); display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: #F8FAFC; border: 1px solid #EEF2F7; }
.tce-kv { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tce-sw { --s: clamp(0, calc((var(--p) - var(--k2, 0)) * 9), 1); flex: none; position: relative; width: 42px; height: 24px; border-radius: 999px; background: #CBD5E1; overflow: hidden; }
.tce-sw::before { content: ""; position: absolute; inset: 0; background: var(--tc-verde); opacity: var(--s); }
.tce-sw i { position: absolute; z-index: 1; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transform: translateX(calc(var(--s) * 18px)); }
.tce-sw-mini { --s: 1; width: 30px; height: 18px; }
.tce-sw-mini i { width: 12px; height: 12px; transform: translateX(12px); }

/* escalas: las que la app le sugiere a SU especialidad (instrumentos/*.json) */
.tce-forms { gap: 12px; }
/* El resultado de muestra: siglas y nombre, el puntaje grande con su banda,
   la barra con las bandas del instrumento a escala y la fuente. Así la
   ventana no se queda vacía cuando la especialidad tiene una sola escala
   (Francisco, 4-oct-2026: «esta card se ve vacía», odontología con la MDAS). */
.tce-res { --r: clamp(0, calc((var(--p) - .08) * 4), 1); display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--c-suave); border: 1px solid var(--c-borde); opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 10px)); }
.tce-res[hidden] { display: none; }
.tce-res-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tce-res-quien { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tce-res-quien strong { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; }
.tce-res-quien span { font-size: 13px; font-weight: 600; line-height: 1.35; color: #475569; }
.tce-res-num { --n: clamp(0, calc((var(--p) - .3) * 5), 1); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; opacity: var(--n); }
.tce-res-num b { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--c); }
.tce-res-num small { font-size: 14px; font-weight: 700; color: #64748B; }
.tce-res-num em { font-style: normal; font-size: 16px; font-weight: 800; color: var(--tc-tinta); }
.tce-res-num em::first-letter { text-transform: uppercase; }
.tce-res-barra { position: relative; padding: 4px 0; }
.tce-res-bandas { display: flex; gap: 3px; height: 10px; }
.tce-res-bandas i { flex-basis: 0; min-width: 4px; border-radius: 5px; background: color-mix(in srgb, var(--c) 18%, #fff); }
.tce-res-bandas i.on { background: var(--c); }
/* La marca llega a su sitio al armarse la escena. */
.tce-res-marca { position: absolute; top: -2px; left: calc(var(--pos) * clamp(0, calc((var(--p) - .25) * 2.5), 1)); width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--tc-tinta); box-shadow: 0 0 0 2px #fff; }
.tce-res-fuente { margin: 0; font-size: 12.5px; font-weight: 600; color: #64748B; }
.tce-forms-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tce-forms-lista:empty { display: none; }
.tce-forms-lista li {
  --r: clamp(0, calc((var(--p) - var(--k) * .1) * 5), 1);
  opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 8px));
  min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px;
  background: #F8FAFC; border: 1px solid #EEF2F7;
}
.tce-forms-lista strong { font-size: 16px; font-weight: 900; letter-spacing: -0.01em; color: var(--tc-tinta); }
.tce-forms-lista span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: #64748B; }
.tce-forms-lista li.mas { background: transparent; border-style: dashed; }
/* Sus respuestas (sólo con pocas escalas, ver la plantilla). */
.tce-forms-resp { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: 6px; }
.tce-forms-pocas .tce-forms-resp { display: flex; }
.tce-forms-resp li {
  --r: clamp(0, calc((var(--p) - .35 - var(--k) * .08) * 6), 1);
  opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 6px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 12px; background: #F8FAFC; border: 1px solid #EEF2F7;
}
.tce-forms-resp span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; color: #475569; }
.tce-forms-resp strong { flex: none; max-width: 48%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 800; color: var(--c); }
/* «Nada entra sin tu visto bueno»: el interruptor que lo pasa al expediente. */
.tce-forms-paso { margin-top: auto; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid #EEF2F7; background: #F8FAFC; }
.tce-forms-paso .tce-sw { grid-row: span 2; }
.tce-forms-paso > span:not(.tce-sw) { font-size: 15px; font-weight: 800; }
.tce-forms-paso small { font-size: 12.5px; font-weight: 600; color: #64748B; }

/* dictado */
.tce-dic-mic { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px; background: var(--c-suave); border: 1px solid var(--c-borde); }
.tce-mic { flex: none; position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--c); display: flex; align-items: center; justify-content: center; }
.tce-mic::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--c); opacity: .5; animation: tcAro 1.8s ease-out infinite; }
.tce-mic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.tce-onda { flex: 1; height: 34px; display: flex; align-items: center; gap: 4px; }
.tce-onda i { flex: 1; max-width: 6px; height: var(--h); border-radius: 3px; background: var(--c); opacity: .75; animation: tcOnda .9s ease-in-out calc(var(--d) * -.13s) infinite alternate; }
.tce-rec { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #DC2626; }
.tce-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #DC2626; animation: tcParpadea 1.2s steps(2) infinite; }
.tce-campos { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.tce-campo { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 12px; border: 1px solid #EEF2F7; background: #fff; }
.tce-campo .tce-v { position: relative; min-height: 1.3em; }
.tce-escribe { --r: clamp(0, calc((var(--p) - var(--k) * .16) / .2), 1); display: inline-block; clip-path: inset(0 calc((1 - var(--r)) * 100%) 0 0); }
@keyframes tcAro { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.35); opacity: 0; } }
@keyframes tcOnda { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes tcParpadea { 50% { opacity: 0; } }

/* percentiles */
.tce-pct-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.tce-input { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--c); background: #fff; }
.tce-input strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.tce-caret { width: 2px; height: 24px; background: var(--c); animation: tcParpadea 1s steps(2) infinite; }
.tce-pct-res { display: flex; align-items: center; gap: 10px; opacity: clamp(0, calc((var(--p) - .45) * 6), 1); }
.tce-badge { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--c); color: #fff; font-weight: 800; font-size: 17px; }
.tce-pct-z { font-size: 14px; font-weight: 600; color: #475569; }
.tce-graf { flex: 1; min-height: 0; width: 100%; }
.tce-rej { fill: none; stroke: #EEF2F7; stroke-width: 1; }
.tce-curva { fill: none; stroke: #CBD5E1; stroke-width: 2; }
.tce-curva-d { stroke-dasharray: 7 6; }
.tce-graf-l { font-size: 12px; font-weight: 700; fill: #94A3B8; font-family: inherit; }
.tce-graf-v { font-size: 13px; font-weight: 700; fill: #475569; font-family: inherit; }
.tce-paciente { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - var(--p) * 1.8), 1); }
.tce-pto { fill: var(--c); stroke: #fff; stroke-width: 2.5; opacity: clamp(0, calc((var(--p) * 1.8 - var(--k) * .3) * 5), 1); }
.tce-pto-hoy { filter: drop-shadow(0 0 6px var(--c)); }

/* cartilla */
.tce-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tce-vac { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tce-vac li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 10px; background: #F8FAFC; font-size: 15px; font-weight: 600; }
.tce-dosis { display: inline-flex; gap: 6px; }
.tce-dosis i { width: 14px; height: 14px; border-radius: 50%; }
.tce-dosis i.ok { background: #22C55E; } .tce-dosis i.ven { background: #F59E0B; box-shadow: 0 0 0 4px #FEF3C7; } .tce-dosis i.atr { background: #EF4444; box-shadow: 0 0 0 4px #FEE2E2; }
.tce-wa-mini {
  --r: clamp(0, calc((var(--p) - .62) * 5), 1);
  margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px;
  background: #ECFDF5; border: 1px solid #A7F3D0; font-size: 14px; line-height: 1.35;
  opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 14px));
}
.tce-wa-mini strong { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #047857; }
.tce-wa-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #25A244; display: flex; align-items: center; justify-content: center; }
.tce-wa-ic svg { width: 18px; height: 18px; fill: #fff; }

/* indicadores */
.tce-k-n { text-transform: none; letter-spacing: .02em; }
.tce-ind-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tce-ind-cab strong { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; color: var(--c); opacity: clamp(0, calc((var(--p) - .5) * 6), 1); }
.tce-meta { fill: #DCFCE7; }
.tce-linea-ind { fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - var(--p) * 1.8), 1); }
.tce-ind .tce-pto { --k2: calc(var(--k) * .3); }
.tce-ia { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--c-suave); border: 1px solid var(--c-borde); }
.tce-ia-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c); }
.tce-ia-tag::before { content: "✦"; font-size: 12px; }
.tce-ia-l { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.tce-ia-pie { font-size: 12px; color: #64748B; }

/* alergia: la receta entera, con el membrete del médico */
.tce-ale { gap: 10px; }
.tce-ale .tce-membrete { padding-bottom: 8px; }
.tce-ale .tce-membrete > div { flex: 1; }
.tce-rx-tag { flex: none; align-self: flex-start; padding: 3px 9px; border-radius: 6px; background: #F1F5F9; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #475569; }
.tce-rx-pac { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tce-rx-pac .tce-kv { flex: 1 1 auto; }
.tce-chip svg { width: 14px; height: 14px; margin-right: 5px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tce-ale > .tce-k { margin-top: 2px; }
.tce-ale .tce-rx-dx { flex: none; }
.tce-input-rx { --rojo: clamp(0, calc((var(--p) - .3) * 8), 1); width: 100%; border-color: color-mix(in srgb, #DC2626 calc(var(--rojo) * 100%), #CBD5E1); }
.tce-input-rx .tce-escribe { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; --r: clamp(0, calc(var(--p) / .28), 1); color: color-mix(in srgb, #DC2626 calc(var(--rojo) * 100%), var(--tc-tinta)); }
.tce-input-rx .tce-caret { background: var(--tc-tinta); }
.tce-alerta {
  --r: clamp(0, calc((var(--p) - .32) * 6), 1);
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: #FEF2F2; border: 1.5px solid #FCA5A5; color: #991B1B;
  opacity: var(--r); transform: translateY(calc((1 - var(--r)) * -8px)) scale(calc(.97 + var(--r) * .03));
}
.tce-alerta svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #DC2626; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tce-alerta strong { display: block; font-size: 16px; }
.tce-alerta span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: #7F1D1D; }
.tce-ale .tce-pie { margin: 2px 0 0; opacity: clamp(0, calc((var(--p) - .5) * 6), 1); }
.tce-firma { margin-top: auto; min-height: 46px; display: flex; align-items: center; justify-content: center; border: 2px dashed #CBD5E1; border-radius: 12px; font-size: 13px; font-weight: 600; color: #94A3B8; }

/* documentos: la hoja con TU membrete y los once que salen del expediente */
.tce-doc { flex-direction: row; gap: 16px; }
.tce-hoja { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 10px; border-radius: 10px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 16px 30px -22px rgba(11,18,32,.4), 8px 8px 0 -1px #F1F5F9, 8px 8px 0 0 #E2E8F0; }
.tce-hoja-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.tce-membrete { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--tc-verde); }
.tce-mem-ini { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--tc-azul); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.tce-membrete div { min-width: 0; display: flex; flex-direction: column; }
.tce-membrete strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15.5px; font-weight: 800; color: var(--tc-azul-o); }
.tce-membrete div span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #64748B; }
.tce-doc-tit { margin: 4px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #334155; }
.tce-doc-pac { margin: 0; font-size: 13px; color: #475569; }
.tce-l { display: block; flex: none; height: 8px; width: var(--w); border-radius: 4px; background: #E2E8F0; }
.tce-l-o { background: #CBD5E1; }
.tce-doc-rp { margin: 4px 0 0; font-size: 15px; font-weight: 800; font-style: italic; color: var(--tc-azul-o); }
.tce-firma-svg { width: 62%; height: auto; margin: auto 0 0 auto; }
.tce-firma-svg path { fill: none; stroke: var(--tc-azul-o); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--p) - .3) * 2.2), 1); }
.tce-once { flex: 1.12; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tce-once-tit { margin: 0; font-size: 13px; font-weight: 700; color: #475569; }
.tce-once-tit strong { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; color: var(--c); margin-right: 2px; }
.tce-doc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tce-doc-lista li { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 9px; background: #F8FAFC; border: 1px solid #EEF2F7; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #334155; }
.tce-doc-lista li i { flex: none; width: 7px; height: 7px; margin: 0 4px; border-radius: 2px; background: #CBD5E1; }
.tce-doc-lista li.top { background: var(--c-suave); border-color: var(--c-borde); color: var(--tc-tinta); font-weight: 800; }
.tce-doc-lista li svg { flex: none; width: 17px; height: 17px; padding: 2.5px; border-radius: 50%; background: var(--c); fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tce-once-pie { margin: auto 0 0; font-size: 12px; font-weight: 700; color: #15803D; }

/* WhatsApp */
.tce-wa { gap: 0; margin: -18px -20px; height: calc(100% + 36px); }
.tce-wa-cab { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #075E54; color: #fff; }
.tce-wa-cab div { display: flex; flex-direction: column; min-width: 0; }
.tce-wa-cab strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.tce-wa-cab span { font-size: 12px; opacity: .8; }
.tce-wa-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.tce-wa-av svg { width: 22px; height: 22px; fill: none; stroke: var(--tc-verde-o); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tce-wa-chat { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; background: #ECE5DD; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 14px 14px; }
.tce-burbuja { position: relative; max-width: 82%; margin: 0; padding: 10px 12px 18px; border-radius: 12px; font-size: 15px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.tce-burbuja time { position: absolute; right: 10px; bottom: 4px; font-size: 10.5px; color: #64748B; }
.tce-burbuja.in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.tce-burbuja.out { --r: clamp(0, calc((var(--p) - .3) * 7), 1); align-self: flex-end; min-width: 80px; background: #DCF8C6; border-top-right-radius: 4px; font-weight: 800; font-size: 17px; opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 12px)); }
.tce-wa-ok { --r: clamp(0, calc((var(--p) - .55) * 7), 1); align-self: center; margin: auto 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; color: #15803D; font-size: 14px; font-weight: 800; box-shadow: 0 6px 16px -8px rgba(0,0,0,.3); opacity: var(--r); transform: scale(calc(.9 + var(--r) * .1)); }
.tce-wa-ok svg { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: #22C55E; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* portal */
.tce-por { align-items: center; justify-content: center; }
.tce-tel { width: min(300px, 100%); height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border-radius: 26px; border: 6px solid var(--tc-tinta); background: #F8FAFC; }
.tce-por-hola { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.tce-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tce-tiles span { display: flex; align-items: center; min-height: 46px; padding: 0 10px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; font-size: 13.5px; font-weight: 700; }
.tce-resumen { --r: clamp(0, calc((var(--p) - .45) * 6), 1); margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--c-suave); border: 1px solid var(--c-borde); opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 12px)); }
.tce-resumen strong { font-size: 15px; }
.tce-resumen span { font-size: 13px; color: #475569; }
.tce-resumen em { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 800; color: #15803D; }
.tce-resumen em svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #22C55E; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* La plantilla de su especialidad (5-oct-2026): la tarjeta de la oferta de
   Nueva consulta y, tras el clic en «Agregar», la principal a la vista y las
   demás como en «Agregar a esta consulta». Los renglones llevan el texto
   DIRECTO (sin <span> adentro) y con puntos suspensivos: un nombre largo
   («Lesión pigmentada (criterios ABCDE y dermatoscopía)») se acorta entero en
   su renglón, nunca a media línea. Cada nivel de ventana enseña su «+N más»
   (`mas-K`) y esconde desde la sección K+1: N es lo escondido de verdad. */
.tce-pla { gap: 10px; }
.tce-pla-oferta { flex: none; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: #F0F9FF; border: 1.5px solid #BAE6FD; }
.tce-pla-tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 800; line-height: 1.3; color: #0C4A6E; }
.tce-pla-n { font-size: 13px; font-weight: 600; color: #075985; }
.tce-pla-btns { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; }
.tce-pla-si, .tce-pla-no { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.tce-pla-si { --r: clamp(0, calc((var(--p) - .22) * 9), 1); background: #0369A1; color: #fff; transform: scale(calc(1 - (var(--r) - var(--r) * var(--r)) * .3)); box-shadow: 0 6px 14px -8px rgba(3,105,161,.8); }
.tce-pla-no { color: #0369A1; }
.tce-pla-vista, .tce-pla-agrega, .tce-pla-chips li {
  --r: clamp(0, calc((var(--p) - .3 - var(--k, 0) * .08) * 6), 1);
  opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 8px));
}
.tce-pla-vista { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--c-suave); border: 1px solid var(--c-borde); }
.tce-pla-ok { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #22C55E; display: flex; align-items: center; justify-content: center; }
.tce-pla-ok svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.tce-pla-sec { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; font-weight: 700; }
.tce-pla-vista small { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.tce-pla-agrega { --k: 1; margin: 2px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #64748B; }
.tce-pla-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tce-pla-chips li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 11px; border-radius: 8px; background: #fff; border: 1px dashed #94A3B8; font-size: 13.5px; font-weight: 700; color: #334155; }
.tce-pla-chips li.mas { display: none; border-style: solid; border-color: transparent; background: transparent; padding-block: 2px; color: var(--c); font-weight: 800; }
.tce-pla-chips li:not(.mas):nth-child(n+4) { display: none; }
.tce-pla-chips li.mas-3 { display: block; }
@container (max-height: 330px) {
  .tce-pla { gap: 7px; }
  .tce-pla-oferta { padding: 9px 12px; }
  .tce-pla-btns { margin-top: 4px; }
  .tce-pla-si, .tce-pla-no { padding: 4px 12px; }
  .tce-pla-vista { padding: 6px 10px; }
  .tce-pla-chips { gap: 4px; }
  .tce-pla-chips li { padding: 4px 10px; font-size: 13px; }
  .tce-pla-chips li:not(.mas):nth-child(n+3) { display: none; }
  .tce-pla-chips li.mas-3 { display: none; }
  .tce-pla-chips li.mas-2 { display: block; }
}
@container (max-height: 250px) {
  .tce-pla-n { display: none; }
  .tce-pla-agrega { display: none; }
  .tce-pla-chips li:not(.mas):nth-child(n+2) { display: none; }
  .tce-pla-chips li.mas-2 { display: none; }
  .tce-pla-chips li.mas-1 { display: block; }
}
@container (max-height: 205px) {
  /* La oferta, apretada: el nombre y «Agregar a mi consulta»; «Ahora no» se va. */
  .tce-pla-oferta { gap: 4px; padding: 7px 10px; }
  .tce-pla-tit { font-size: 14px; }
  .tce-pla-btns { margin-top: 2px; }
  .tce-pla-no { display: none; }
}

/* Escenas en ventanas chicas (celular): menos aire, la misma historia */
@container (max-height: 330px) {
  .tce { gap: 9px; font-size: 14px; }
  .tce-forms-lista { gap: 6px; }
  .tce-forms-lista li { padding: 7px 10px; }
  .tce-forms-lista li:nth-child(n+3) { display: none; }
  .tce-forms-lista strong { font-size: 14.5px; }
  .tce-forms-lista span { font-size: 11px; }
  .tce-res { padding: 10px 12px; gap: 6px; }
  .tce-res-quien strong { font-size: 16px; }
  .tce-res-quien span { font-size: 12px; }
  .tce-res-num b { font-size: 32px; }
  .tce-res-num em { font-size: 14.5px; }
  .tce-forms-paso { padding: 8px 11px; }
  .tce-forms-paso small { display: none; }
  .tce-forms-pocas .tce-forms-resp { display: none; }
  .tce-ale { gap: 7px; }
  .tce-ale .tce-membrete { padding-bottom: 0; border-bottom: 0; }
  .tce-ale .tce-membrete span[data-q="persona"], .tce-rx-dx, .tce-ale .tce-firma { display: none; }
  .tce-alerta { padding: 9px 12px; }
  .tce-alerta strong { font-size: 14.5px; }
  .tce-alerta span { font-size: 12.5px; }
  .tce-v { font-size: 14.5px; }
  .tce-pre-filas { gap: 6px; }
  .tce-pre-filas li { padding: 7px 11px; }
  .tce-av { width: 34px; height: 34px; font-size: 13px; }
  .tce-pie { display: none; }
  .tce-campo { padding: 5px 10px; }
  .tce-dic-mic { padding: 7px 10px; }
  .tce-mic { width: 36px; height: 36px; }
  .tce-onda { height: 26px; }
  .tce-vac { gap: 4px; }
  .tce-vac li { padding: 4px 10px; font-size: 13.5px; }
  .tce-vac li:nth-child(n+5):not(:last-child) { display: none; }
  .tce-wa-mini { padding: 8px 12px; font-size: 13px; }
  .tce-ia { padding: 9px 12px; }
  .tce-ia-l { font-size: 13.5px; }
  .tce-ia-pie { display: none; }
  .tce-alerta { padding: 10px 12px; }
  .tce-alerta span { font-size: 13px; }
  .tce-firma { min-height: 36px; }
  .tce-once-pie { display: none; }
  .tce-burbuja { font-size: 13.5px; }
  .tce-tel { padding: 12px; gap: 7px; }
  .tce-tiles span { min-height: 36px; font-size: 12.5px; }
}
/* Los once documentos en una columna caben si se aprietan un poco: medido,
   a 350 px de alto el último («Notificación al Ministerio Público») se cortaba. */
@container (max-height: 470px) {
  .tce-forms-resp li:nth-child(n+4) { display: none; }
}
@container (max-height: 420px) {
  .tce-once { gap: 6px; }
  .tce-doc-lista { gap: 3px; }
  .tce-doc-lista li { padding: 3px 9px; font-size: 13px; }
  .tce-doc-lista li svg { width: 15px; height: 15px; padding: 2px; }
  .tce-once-pie { display: none; }
}
@container (max-width: 360px) {
  .tce-chip { font-size: 12px; padding: 4px 9px; }
}
/* Ventana angosta (celular, Fold abierto): la hoja se queda en su membrete
   —el nombre del médico no se pierde— y los once van en dos columnas. */
@container (max-width: 440px) {
  .tce-doc { flex-direction: column; gap: 8px; }
  .tce-hoja { flex: none; padding: 8px 10px; box-shadow: 0 10px 20px -16px rgba(11,18,32,.4); }
  .tce-membrete { padding-bottom: 0; border-bottom: 0; }
  .tce-membrete strong { font-size: 14.5px; }
  .tce-mem-ini { width: 32px; height: 32px; font-size: 13px; border-radius: 9px; }
  .tce-hoja-cuerpo { display: none; }
  .tce-once { gap: 6px; }
  .tce-once-tit { font-size: 12px; }
  .tce-once-tit strong { font-size: 17px; }
  .tce-doc-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .tce-doc-lista li { padding: 4px 7px; gap: 6px; font-size: 12px; border-radius: 8px; }
  .tce-doc-lista li.ult:nth-child(odd) { grid-column: 1 / -1; }
  .tce-doc-lista li svg { width: 14px; height: 14px; padding: 2px; }
  .tce-doc-lista li i { width: 6px; height: 6px; margin: 0 4px; }
}

/* El control prenatal (4-oct-2026, sólo con el Diario del bebé encendido). */
.tce-emb { gap: 10px; }
.tce-emb-cab { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: var(--c-suave); border: 1px solid var(--c-borde); }
.tce-emb-sdg { display: flex; align-items: center; gap: 8px; }
.tce-emb-sdg b { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--c); }
.tce-emb-sdg span { font-size: 12.5px; font-weight: 700; line-height: 1.2; color: #475569; }
.tce-emb-cab .tce-kv { margin-left: auto; text-align: right; }
.tce-emb-nota { margin: 0; font-size: 12.5px; font-weight: 600; color: #64748B; }
.tce-emb-ventanas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tce-emb-ventanas li {
  --r: clamp(0, calc((var(--p) - var(--k) * .12) * 6), 1);
  opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 8px));
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: center;
  padding: 7px 10px; border-radius: 10px; background: #F8FAFC; border: 1px solid #EEF2F7;
}
.tce-emb-ventanas li i { grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #CBD5E1; display: flex; align-items: center; justify-content: center; }
.tce-emb-ventanas li.hecho i { background: #22C55E; border-color: #22C55E; }
.tce-emb-ventanas li.hecho svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.tce-emb-ventanas li.ahora { background: var(--c-suave); border-color: var(--c-borde); }
.tce-emb-ventanas li.ahora i { border-color: var(--c); background: radial-gradient(circle, var(--c) 0 4px, transparent 5px); }
.tce-emb-ventanas span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 700; }
.tce-emb-ventanas small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: #64748B; }
.tce-emb-ventanas li.ahora small { color: var(--c); font-weight: 800; }
.tce-emb-diario { margin: auto 0 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #BE185D; }

/* «+N más» (4-oct-2026): cada uno sólo se ve en el nivel de ventana que lo
   necesita, y dice cuántos quedaron fuera (plantilla: `escalas_lista`,
   `docs_lista`; JS: `armarRuta`). */
.tce-forms-lista li.mas-1, .tce-doc-lista li.mas { display: none; }
.tce-doc-lista li.mas { justify-content: center; background: transparent; border-style: dashed; font-weight: 800; color: var(--c); }
@container (max-height: 330px) {
  .tce-forms-lista li.mas-1 { display: flex; }
  .tce-emb { gap: 7px; }
  .tce-emb-cab { padding: 7px 11px; }
  .tce-emb-sdg b { font-size: 32px; }
  .tce-emb-ventanas li { padding: 5px 9px; }
  /* WhatsApp: el saludo de pediatría («papás de…») es más largo; medido a
     344×882, «Cita confirmada» quedaba cortada. */
  .tce-wa-cab { padding: 9px 14px; }
  .tce-wa-cab span { display: none; }
  .tce-wa-chat { padding: 12px 14px; gap: 8px; }
  .tce-wa-ok { padding: 6px 12px; }
}
/* Ventana ancha y baja (el Fold abierto): los once en dos columnas. */
@container (max-height: 330px) and (min-width: 441px) {
  .tce-hoja { flex: .8; }
  .tce-doc-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
  .tce-doc-lista li { padding: 3px 8px; font-size: 12.5px; }
  .tce-doc-lista li.ult:nth-child(odd) { grid-column: 1 / -1; }
}
/* Angosta y a media altura (344×882): medido, el último renglón —«Notificación
   al Ministerio Público», a lo ancho— quedaba 5 px fuera. */
@container (max-height: 330px) and (max-width: 440px) {
  .tce-once { gap: 5px; }
  .tce-doc-lista { gap: 3px; }
  .tce-doc-lista li { padding-block: 3px; }
}

/* ── Escenarios BAJOS (4-oct-2026) ─────────────────────────────────────────
   Francisco: «una card está encimada». Medido con escenas_caben.py: en
   teléfonos de 640 a 760 px de alto el cuerpo de la ventana mide de 195 a
   245 px, y escalas, dictado, documentos, la IA y WhatsApp no cabían por 20 a
   95 px. Las ventanas recortan, así que se veían CORTADAS (la lista de
   documentos terminaba a media línea). Aquí cada escena suelta lo secundario
   y se queda con lo que promete su texto; lo que se esconde de una lista lo
   cuenta un «+N más». La prueba `test_ninguna_escena_se_corta_en_un_telefono_bajo`
   lo mide en el navegador. */
@container (max-height: 250px) {
  /* Escalas: el resultado con su interpretación y su fuente, y el visto bueno. */
  .tce-forms { gap: 7px; }
  .tce-res { padding: 8px 11px; gap: 4px; }
  .tce-res-quien span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .tce-res-num b { font-size: 28px; }
  .tce-forms-lista li { padding: 5px 10px; }
  .tce-forms-lista li:not(.mas) span { display: none; }
  .tce-forms-lista li.mas { flex-direction: row; align-items: baseline; gap: 5px; }
  .tce-forms-paso { padding: 6px 11px; }
  /* Dictado: tres campos; el plan se va. */
  .tce-dic { gap: 7px; }
  .tce-dic-mic { padding: 5px 10px; }
  .tce-campo:nth-child(n+4) { display: none; }
  /* Control prenatal: la nota del redatado ya la dice el texto de la tarjeta,
     y de las semanas sólo queda la de la ventana que toca ahora. */
  .tce-emb-nota { display: none; }
  .tce-emb-ventanas li:not(.ahora) small { display: none; }
  /* Receta: sin los rótulos que el renglón ya dice. */
  .tce-ale > .tce-k, .tce-rx-pac .tce-k { display: none; }
  .tce-input-rx { min-height: 40px; }
  /* WhatsApp: cabecera y burbujas más apretadas. */
  .tce-wa-cab { padding: 7px 12px; }
  .tce-wa-av { width: 30px; height: 30px; }
  .tce-wa-chat { padding: 9px 12px 10px; gap: 6px; }
  .tce-burbuja { padding: 7px 10px 15px; }
}
@container (max-height: 250px) and (max-width: 440px) {
  .tce-doc-lista li:not(.mas):nth-child(n+8) { display: none; }
  .tce-doc-lista li.mas-7 { display: flex; }
}
@container (max-height: 205px) {
  .tce-forms-lista { display: none; }
  .tce-campo:nth-child(n+3) { display: none; }
  /* La barra de la ventana ya dice «WhatsApp · recordatorio» y la burbuja
     nombra al médico: la cabecera verde es lo que sobra. */
  .tce-wa-cab { display: none; }
  /* Control prenatal: dos ventanas de ejemplo en vez de tres. */
  .tce-emb-ventanas li:nth-child(n+3) { display: none; }
}
@container (max-height: 205px) and (max-width: 440px) {
  .tce-doc-lista li:not(.mas):nth-child(n+6) { display: none; }
  .tce-doc-lista li.mas-7 { display: none; }
  .tce-doc-lista li.mas-5 { display: flex; }
}

/* ── Aire para la letra (5-oct-2026) ─────────────────────────────────────
   Lo que cabía, cabía JUSTO: medido con Inter servida de verdad (la prueba
   la bloqueaba y medía con la letra de reserva), a 360×640 la pre-consulta y
   la receta se cortaban 8 px —25 px con el tercer renglón largo de
   odontología, nutrición o psicología—, y con una letra apenas 10 % más ancha
   (la de reserva de Linux, el tamaño de letra grande de Android) se cortaban
   también a 412×640, 375×667 y 390×664: «La amoxicilina es de la familia…»
   hasta 32 px, la pre-consulta hasta 39 px, el «Cita confirmada» de WhatsApp
   13 px. En la CI de Linux, por eso, la prueba había dejado de afirmar el
   corte. Aquí cada escena suelta lo que la tarjeta de texto ya dice, para que
   quepa con holgura y no al ras:
   · pre-consulta: dos renglones (motivo y la alergia que la receta va a
     usar); el tercero lo cuenta la tarjeta;
   · receta: el aviso rojo ya dice «Alergia registrada: penicilina», así que
     la pastilla del renglón del paciente sobra (al apretarse bajaba a un
     segundo renglón y empujaba el aviso fuera de la ventana);
   · WhatsApp: la burbuja un punto más chica en ventanas angostas y bajas, y
     «Cita confirmada · mañana 9:00» en UN renglón (al bajar a dos, el
     segundo quedaba fuera de la ventana);
   · escalas: el nombre largo del instrumento («Cuestionario de salud del
     paciente modificado para adolescentes») en dos renglones como mucho. */
.tce-wa-ok { max-width: 100%; }
.tce-wa-ok span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@container (max-height: 330px) and (min-height: 251px) {
  /* Debajo de 250 px ya va en un renglón con puntos suspensivos (arriba). */
  .tce-res-quien span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@container (max-height: 205px) {
  .tce-pre-filas li:nth-child(n+3) { display: none; }
  .tce-rx-pac .tce-chip { display: none; }
  .tce-ale .tce-mem-ini { width: 30px; height: 30px; font-size: 12.5px; }
  .tce-input-rx { min-height: 36px; }
  .tce-input-rx .tce-escribe { font-size: 18px; }
  .tce-alerta { padding: 8px 11px; gap: 10px; }
}
@container (max-height: 250px) and (max-width: 440px) {
  .tce-burbuja { font-size: 13px; line-height: 1.35; }
}

/* ── 3 · El cierre: «¡Listo!» con el nombre ─────────────────────────────────
   El de la primera versión (Francisco, 4-oct-2026: «me gustaba más el final
   anterior de "Listo doctor", regresemos a ése»), montado sobre el `.cta-v3`
   de siempre para que la cola de la ruta aterrice en su botón.

   LAS CAPAS, que son lo que hace que la flecha se vea tocar el botón:
   · la sección es su propio contexto de apilamiento (`isolation`);
   · el fondo blanco de la tarjeta vive en su `::before` con z-index -1, así
     que queda DEBAJO de la cola (z-index 0, landing.css);
   · los textos y el botón llevan z-index 1, así que quedan ENCIMA.
   Resultado: la línea pasa por detrás de las letras —como en la portada— y
   sobre el blanco de la tarjeta, hasta el borde del botón. Para que esto
   funcione, ni `.tc-cuenta-in` ni `.tc-registro` pueden crear su propio
   contexto: nada de z-index, transform, opacity < 1 ni `lnd-reveal`
   (que trae `will-change`) en ellos. */
.tc-cierre { isolation: isolate; padding: 104px 24px; text-align: left; }
.tc-cuenta-in { position: relative; max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: center; gap: 72px; }
.tc-cuenta-txt { position: relative; z-index: 1; min-width: 0; color: #fff; }
.tc-cuenta-mascota { display: block; width: 140px; height: auto; margin: 0 0 6px -8px; filter: drop-shadow(0 16px 26px rgba(0,0,0,.28)); }
.tc-cierre .tc-listo { margin: 0; font-size: clamp(42px, 5.2vw, 72px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; color: #fff; }
.tc-cierre .tc-listo-sub { margin: 14px 0 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.45; color: rgba(255,255,255,.92); }
.tc-logros { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 11px 28px; }
.tc-logros li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.4; color: rgba(255,255,255,.95); }
.tc-logros li[hidden] { display: none; }
.tc-logro-ok { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.tc-logro-ok svg { width: 14px; height: 14px; fill: none; stroke: var(--tc-verde-o); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* Con diez o más momentos, en dos columnas: la lista no empuja la tarjeta. */
@media (min-width: 1100px) {
  .tc-logros.tc-logros-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-logros.tc-logros-2 li { font-size: 16px; }
}

.tc-registro { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 24px; color: var(--tc-tinta); }
.tc-registro::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); }
.tc-registro > * { position: relative; z-index: 1; }
.tc-cierre .tc-registro-tag { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: var(--tc-verde-o); }
.tc-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tc-dato { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed #CBD5E1; }
.tc-dato-k { font-size: 13px; font-weight: 600; color: #64748B; }
.tc-dato-v { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 800; color: #94A3B8; }
.tc-dato.lleno { border-style: solid; border-color: #BBF7D0; background: #F0FDF4; }
.tc-dato.lleno .tc-dato-v { color: var(--tc-tinta); }
.tc-dato.lleno .tc-dato-v::after { content: ""; display: inline-block; vertical-align: -3px; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%; background: #22C55E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.tc-avance { height: 8px; border-radius: 4px; background: #E2E8F0; overflow: hidden; }
.tc-avance i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--tc-azul), var(--tc-verde)); transition: width .5s ease; }
.tc-cierre .tc-avance-txt { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tc-gris); }

/* El botón: el `.cta-v3-btn` de siempre (es el que busca el motor y el que
   hace clic al tocarlo la flecha), vestido con el degradado de la tarjeta. */
.tc-cierre .cta-v3-actions { display: block; }
.tc-cierre .cta-v3-btn.tc-btn-grad {
  position: relative; display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
  min-height: 58px; padding: 0 24px; border-radius: 12px;
  background: linear-gradient(135deg, var(--tc-azul), var(--tc-verde-o)); color: #fff;
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
  box-shadow: 0 10px 24px -8px rgba(27,123,214,.6);
}
.tc-cierre .cta-v3-btn.tc-btn-grad:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(27,123,214,.7); }
/* El clic de la flecha, con la sombra del botón y no con la negra del cierre
   azul; y el aro de color, porque uno blanco sobre la tarjeta no se ve. */
.tc-cierre.ruta-impacto .cta-v3-btn.tc-btn-grad { animation-name: tcBotonClick; }
@keyframes tcBotonClick {
  0%, 62%, 100% { transform: scale(1); box-shadow: 0 10px 24px -8px rgba(27,123,214,.6); }
  26%           { transform: scale(.955); box-shadow: 0 4px 10px -6px rgba(27,123,214,.6); }
  44%           { transform: scale(1.035); box-shadow: 0 16px 30px -8px rgba(27,123,214,.7); }
}
.tc-cierre.ruta-impacto .cta-v3-btn.tc-btn-grad:hover,
.tc-cierre.ruta-impacto .cta-v3-btn.tc-btn-grad:focus-visible { animation: none; }
.tc-cierre .cta-v3-btn::after { border-color: rgba(27,123,214,.55); }
.tc-cierre .ruta-onda { --onda: rgba(84,185,72,.85); }
/* Al tocarlo, el botón NO se esconde para volver a entrar (el `rutaSube` de
   la portada): es justo donde está la punta de la flecha. */
.tc-cierre.ruta-impacto .cta-v3-actions { animation: none; }
/* Planes, comparativa y seguridad: los botones del cierre de siempre, más
   chicos y en tono de tarjeta (el blanco translúcido de la portada no se ve
   sobre blanco). */
.tc-registro .cta-v3-mas { margin: -2px 0 0; gap: 6px; justify-content: center; }
.tc-registro .cta-v3-mas a { padding: 6px 12px; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--tc-azul-o); background: #F1F6FD; border: 1px solid #D6E6F8; }
.tc-registro .cta-v3-mas a:hover { background: #E3EEFB; border-color: #B9D4F3; transform: translateY(-1px); }
.tc-cierre .tc-confianza { margin: 0; text-align: center; font-size: 13px; line-height: 1.45; color: #64748B; }
/* «Podrás editar…»: antes era un botón que te regresaba arriba. Francisco,
   4-oct-2026: «llevarlos al inicio cuando ya se van a registrar no es muy
   amigable». El registro ya llega lleno y ahí se corrige. */
.tc-cierre .tc-editar { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 13.5px; line-height: 1.45; color: var(--tc-azul-o); }
.tc-editar::before { content: ""; flex: none; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (max-width: 1099.98px) {
  .tc-cuenta-in { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; }
}

/* ── Fold abierto y tabletas (820–1099 px) ────────────────────────────── */
@media (max-width: 1099.98px) {
  /* Fold abierto y tabletas: abajo a la IZQUIERDA, como en celular; a la
     derecha vive el botón fijo de WhatsApp. */
  .tc-mascota { right: auto; left: 18px; bottom: 18px; width: 104px; }
  .tc-globo { right: auto; left: 96%; bottom: 40%; width: 210px; font-size: 13.5px; border-radius: 16px 16px 16px 4px; }
}

@media (max-width: 819.98px) {
  .tc-hero { min-height: auto; padding: 34px 16px 96px; }
  .tc-ecg { width: 2090px; height: 110px; }
  .tc-ecg-pulso { stroke-dasharray: .01 .14; stroke-dashoffset: .15; animation-name: tcPulso3; animation-duration: 3.6s; }
  .tc-saludo { gap: 10px 12px; }
  .tc-hola, .tc-nombre, .tc-nombre-espejo { font-size: clamp(32px, 9.4vw, 46px); }
  .tc-trato { padding: 4px; }
  .tc-trato-gota { top: 4px; bottom: 4px; }
  .tc-trato button { min-height: 44px; min-width: 56px; padding: 0 15px; font-size: 18px; }
  .tc-nombre-fila { flex-basis: 100%; justify-content: center; }
  .tc-logo { margin-bottom: 18px; gap: 9px; }
  .tc-logo-mark { width: 44px; }
  .tc-logo-txt { width: 186px; }
  .tc-fila-esp { flex-direction: column; gap: 8px; margin-top: 22px; font-size: 18px; }
  .tc-combo { width: 100%; }
  .tc-combo-in { min-height: 56px; font-size: 20px; }
  .tc-combo-lista { max-height: min(280px, 42svh); }
  .tc-acciones { margin-top: 24px; }
  /* Más chico que los campos: es una invitación, no otro campo que llenar. */
  .tc-btn-latido, .tc-btn-registro { min-height: 54px; min-width: min(280px, 100%); padding: 0 24px; gap: 10px; font-size: 17px; }
  .tc-btn-latido svg { width: 18px; height: 18px; }

  .tc-previa { font-size: 13px; }
  .tc-privado { max-width: 300px; font-size: 12px; }
  /* La mascota, chiquita y abajo a la izquierda (a la derecha vive el botón
     de WhatsApp): asoma y habla en un globo corto, sin apretar nada. */
  .tc-mascota { right: auto; left: 10px; bottom: 12px; width: 58px; }
  .tc-mascota img { filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
  .tc-globo { right: auto; left: 100%; bottom: 18%; margin-left: 6px; width: max-content; max-width: min(240px, calc(100vw - 168px)); padding: 7px 11px; font-size: 12.5px; line-height: 1.3; border-radius: 12px 12px 12px 4px; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
  .tc-baja { display: none; }

  /* El cierre en una columna (como en la primera versión, debajo de 820):
     primero lo que recorrió, luego la tarjeta. */
  .tc-cierre { padding: 72px 16px 110px; }
  .tc-cuenta-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tc-cuenta-mascota { width: 110px; }
  .tc-registro { padding: 22px 18px; }
  .tc-logros { margin-top: 22px; gap: 9px; }
  .tc-logros li { font-size: 15.5px; gap: 10px; }
  .tc-logro-ok { width: 22px; height: 22px; }
}
/* Celular angosto (344 px): «Medicina general» cabe entera en su renglón. */
@media (max-width: 380px) {
  .tc-dato { padding: 10px 11px; gap: 8px; }
  .tc-dato-k { font-size: 12px; }
  .tc-dato-v { font-size: 15px; }
  .tc-dato.lleno .tc-dato-v::after { margin-left: 6px; }
}

/* ── La ruta en celular: escenario fijo ARRIBA y el texto pasa por debajo ──
   El zigzag también aquí (en la portada, en celular la línea baja recta):
   el canal de la línea mide 46 px y los hitos se turnan de orilla, así la
   curva ondula sin pasar nunca por debajo de una tarjeta. */
@media (max-width: 900px) {
  .tc-viaje { display: block; margin-top: 18px; padding: 0 4px; --tc-esc-h: clamp(250px, 42svh, 380px); }
  .tc-escenario { position: sticky; top: calc(var(--tc-nav) + 8px); }
  /* Lo que sube por detrás del escenario no debe asomar entre él y la barra. */
  /* ...ni por sus esquinas redondeadas ni por sus orillas (4-oct-2026): la
     franja tapaba sólo 24 px por ARRIBA, y el hito, la línea y el borde de la
     tarjeta que pasan por debajo asomaban por las esquinas de abajo (radio de
     22 px) y por los lados. Ahora tapa también todo el escenario y 6 px a cada
     lado; el recorte deja libre lo demás, así que no ensancha la página. */
  .tc-escenario::before { content: ""; position: absolute; left: -18px; right: -18px; top: -16px; bottom: 0; background: #F4F7FA;
    clip-path: polygon(0 0, 100% 0, 100% 24px, calc(100% - 12px) 24px, calc(100% - 12px) 100%, 12px 100%, 12px 24px, 0 24px); }
  .tc-esc { inset: 10px; }
  .tc-fondo { border-radius: 22px; }
  .tc-ventana, .tc-captura, .tc-shot-ia { border-radius: 14px; }
  .tc-shot-ia { padding: 8px; }
  .tc-ventana-barra { height: 32px; padding: 0 11px; }
  .tc-ventana-barra i { width: 8px; height: 8px; }
  .tc-ventana-barra > span { font-size: 11.5px; }
  .tc-ventana-cuerpo { padding: 11px 12px; }
  .tce-wa { margin: -11px -12px; height: calc(100% + 22px); }
  .tc-viaje .ruta-lienzo { padding: 10px 0 0; }
  .tc-ruta .ruta-paso { grid-template-columns: 46px minmax(0, 1fr); align-items: center;
    min-height: calc(100svh - var(--tc-nav) - var(--tc-esc-h) - 24px); }
  .tc-ruta .ruta-paso:last-child { min-height: calc(100svh - var(--tc-nav) - var(--tc-esc-h) + 30px); padding-bottom: 60px; }
  .tc-ruta .ruta-hito { margin-top: 0; }
  .tc-ruta .ruta-izq .ruta-hito { justify-self: start; }
  .tc-ruta .ruta-der .ruta-hito { justify-self: end; margin-right: 4px; }
  .tc-ruta .ruta-pasos { gap: 0; }
  .tc-kicker { font-size: 13.5px; }
  .tc-candado { margin: 0 4px 32px; padding: 26px 20px; }

  /* 7-oct-2026 · Francisco: texto fijo arriba, imágenes con el scroll.
     El JS mueve las piezas originales sólo en esta vista. Los 46 px de
     canal quedan libres también junto al texto y hasta el final de la ruta. */
  .tc-viaje-movil .tc-escenario {
    height: var(--tc-texto-h, 280px); margin-left: 46px; z-index: 3;
  }
  .tc-viaje-movil .tc-escenario > .tc-fondo { display: none; }
  /* El respaldo del fundido sigue el contorno de la tarjeta: sin franja
     superior ni esquinas cuadradas que asomen detrás (7-oct-2026). */
  .tc-viaje-movil .tc-escenario::before {
    left: 1px; right: 1px; top: 1px; bottom: auto;
    height: calc(var(--tc-texto-actual-h, var(--tc-texto-h, 280px)) - 2px);
    border-radius: 17px; clip-path: none;
  }
  .tc-viaje-movil .tc-texto-movil {
    position: absolute; inset: 0 0 auto; max-width: none; margin: 0;
    padding: 16px; border-radius: 18px;
    background: var(--c-suave); border-color: var(--c-borde);
    box-shadow: 0 16px 38px -22px color-mix(in srgb, var(--c) 55%, transparent);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .45s ease, visibility 0s linear .45s;
  }
  .tc-viaje-movil .tc-texto-movil[hidden] { display: none; }
  .tc-viaje-movil .tc-texto-movil.on {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .55s ease, visibility 0s;
  }
  .tc-viaje-movil .tc-texto-movil .ruta-t {
    font-size: clamp(22px, 5.9vw, 30px); font-weight: 900;
    line-height: 1.15; letter-spacing: -.03em; margin-bottom: 10px;
  }
  .tc-viaje-movil .tc-texto-movil .ruta-d { font-size: 13.5px; line-height: 1.5; }
  .tc-viaje-movil .tc-texto-movil .tc-kicker { margin-bottom: 10px; }
  .tc-viaje-movil .tc-texto-movil .ruta-fase,
  .tc-viaje-movil .tc-texto-movil .ruta-n { color: var(--c); }
  .tc-viaje-movil .tc-texto-movil .ruta-n { opacity: 1; transform: none; }
  .tc-viaje-movil .tc-texto-movil .ruta-ic { background: var(--c); color: #fff; }
  .tc-viaje-movil .ruta-lienzo { padding-top: 24px; }
  .tc-viaje-movil .ruta-paso {
    min-height: max(calc(100svh - var(--tc-nav) - var(--tc-texto-h, 280px) - 80px), calc(var(--tc-esc-h) + 48px));
    padding: 0 0 32px;
  }
  .tc-viaje-movil .ruta-paso:last-child { padding-bottom: 60px; }
  .tc-imagen-movil {
    position: relative; grid-column: 2; grid-row: 1;
    width: 100%; max-width: 620px; justify-self: end;
    height: calc((var(--tc-esc-h) - 20px) * var(--tc-imagen-escala, 1) + 20px);
    /* El contorno inverso deja las esquinas de la tarjeta transparentes. */
    clip-path: var(--tc-recorte-forma, inset(-100px));
  }
  .tc-imagen-movil .tc-esc {
    right: auto; bottom: auto; width: var(--tc-imagen-ancho, calc(100% - 20px));
    height: calc(var(--tc-esc-h) - 20px);
    opacity: 1; transform: scale(var(--tc-imagen-escala, 1)); transform-origin: top left;
    transition: none; pointer-events: auto;
  }
  .tc-imagen-movil .tc-esc .tce { --p: 1; transition: none; }
  /* La sombra de la imagen no cruza el corte del texto. Las imágenes
     completas conservan su sombra; el texto conserva siempre la suya. */
  .tc-imagen-recortada > .tc-fondo,
  .tc-imagen-recortada > .tc-esc > .tc-ventana,
  .tc-imagen-recortada > .tc-esc > .tc-captura,
  .tc-imagen-recortada > .tc-esc > .tc-shot-ia,
  .tc-imagen-recortada > .tc-esc > .tc-shot-ia > .ia-demo { box-shadow: none; }
  /* La cifra sobre el primer punto no se corta al usar letra más grande. */
  .tc-imagen-movil .tce-ind .tce-graf { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .tc *, .tc *::before, .tc *::after { animation: none !important; transition: none !important; }
  .tc-ecg-pulso { display: none; }
  .tc-btn-latido { background-color: #fff; }
}