/* Fetalia Visor · landing. Se apoya en la hoja de Fetalia Lab · Introducción al STIC
   (/lab/introduccion-al-stic/assets/landing.css): paleta, tipografía, barra, puente claro → oscuro,
   zona oscura, carrusel, Live STIC Demo, pie y CTA flotante. Aquí solo la portada, las herramientas,
   la importación, el uso docente y el cierre. */

/* ---------- barra */
.bar-link { display: inline-flex; align-items: center; min-height: 44px; font: 500 12px/1.4 var(--f-mono); color: var(--muted); text-decoration: none; }
.bar-link:hover { color: var(--accent); }
html.dark .bar-link { color: var(--d-muted); }
html.dark .bar-link:hover { color: var(--na-ink); }
.phone-label { display: none; }
.nw { white-space: nowrap; }

/* ---------- portada (como Fetal Brain 3D) */
.hb { padding: calc(var(--bar-h) + clamp(28px, 6vh, 64px)) var(--gutter) clamp(64px, 10vh, 120px); }
.hb .wrap { max-width: 1280px; }
.hb__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.hb .kicker { margin-bottom: 18px; }
.hb h1 { margin: 0; font: 500 clamp(40px, 5vw, 70px)/1 var(--f-display); letter-spacing: -.015em; }
.hb h1 em { display: block; margin-top: .16em; font-style: italic; font-weight: 500; font-size: .48em; letter-spacing: -.005em; color: var(--muted); }
.hb .meta { margin: 22px 0 0; font: 500 11.5px/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.hb .meta i { font-style: normal; color: var(--line-2); padding: 0 .5em; }
.hb .facts { margin: 30px 0 28px; }
.hb__fig { margin: 0; min-width: 0; }
.hb__fig figcaption { margin-top: 14px; font: 400 11.5px/1.5 var(--f-mono); color: var(--muted); }
.screen { overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: #000; box-shadow: 0 18px 48px -32px rgb(10 10 12 / 28%); }
.screen img { width: 100%; height: auto; }
.tvbox { aspect-ratio: var(--tv-ar, 16 / 10); }
.tvbox video { width: 100%; height: 100%; object-fit: cover; }
/* Teléfono: título, video, ficha y botones, en ese orden. */
.hb__txt { display: contents; }
.hb__head { order: 1; }
.hb__fig { order: 2; }
.hb__body { order: 3; }
@media (min-width: 821px) {
  .hb__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .hb__txt { display: block; }
  .hb__fig { order: 0; }
}

/* ---------- puente: la nota bajo los pasos */
.bridge .fine { margin: 18px 0 0; font: 400 11.5px/1.6 var(--f-mono); opacity: .7; }

/* ---------- zona oscura: textos de apoyo */
.dark-zone .fine { margin: 24px 0 0; font: 400 12px/1.6 var(--f-mono); color: var(--d-muted); }
.dark-zone .vtags { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 22px 0 0; padding: 0; list-style: none; font: 400 11.5px/1.5 var(--f-mono); color: var(--d-muted); }
.dark-zone .vtags li:not(:last-child)::after { content: "·"; margin: 0 9px; }

/* ---------- herramientas: una figura y su texto, alternados en escritorio */
.modo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 56px; }
.modo > * { min-width: 0; }
.modo figure { margin: 0; }
.modo .scr { overflow: hidden; border: 1px solid var(--d-line); border-radius: 8px; background: #000; box-shadow: 0 40px 120px -50px rgb(0 0 0 / 90%); }
.modo .scr img, .modo .scr video { width: 100%; height: auto; }
.modo figcaption { margin-top: 14px; font: 400 11.5px/1.5 var(--f-mono); color: var(--d-muted); }
.modo h3 { margin: 14px 0 18px; font: 500 clamp(29px, 3vw, 40px)/1.1 var(--f-display); letter-spacing: -.01em; color: var(--na-ink); text-wrap: balance; }
.modo-txt > p:not(.kicker) { margin: 0; color: #a9b8c1; font-size: 16px; line-height: 1.62; }
@media (min-width: 900px) {
  .modo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items: center; gap: clamp(32px, 5vw, 72px); margin-top: 88px; }
  .modo figure { grid-column: 2; grid-row: 1; }
  .modo-txt { grid-column: 1; grid-row: 1; }
  .modo:nth-of-type(even) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .modo:nth-of-type(even) figure { grid-column: 1; }
  .modo:nth-of-type(even) .modo-txt { grid-column: 2; }
}

/* ---------- importación y biblioteca */
.imp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 8px; }
.imp > * { min-width: 0; }
.imp h3 { margin: 14px 0 16px; font: 500 clamp(28px, 2.8vw, 38px)/1.1 var(--f-display); color: var(--na-ink); }
.imp p:not(.kicker) { margin: 0; color: #a9b8c1; font-size: 16px; line-height: 1.62; }
.imp p.note-d { margin-top: 24px; font-size: 14.5px; }
.lib { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--d-line); }
.lib li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--d-line); }
.lib b { font: 400 22px/1 var(--f-mono); color: var(--na-ink); }
.lib strong { display: block; font-weight: 500; font-size: 15px; color: var(--d-txt); }
.lib span:not(.pillita) { display: block; margin-top: 3px; font-size: 13px; color: var(--d-muted); }
.pillita { padding: 5px 9px; border: 1px solid var(--d-line); border-radius: 40px; font: 500 10px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--na-label); }
.imp figure { margin: 28px 0 0; }
.imp .scr { overflow: hidden; border: 1px solid var(--d-line); border-radius: 8px; background: #000; }
.imp .scr img { width: 100%; height: auto; }
.imp figcaption { margin-top: 12px; font: 400 11.5px/1.5 var(--f-mono); color: var(--d-muted); }
@media (min-width: 900px) { .imp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }

/* ---------- uso docente: las dos partes, en la zona oscura */
.dark-zone .parts { margin-top: 56px; }
.dark-zone .part h3 { color: var(--na-ink); }
.dark-zone .part .role { color: #a9b8c1; }
.dark-zone .part ol { border-top-color: var(--d-line); }
.dark-zone .part li { border-bottom-color: var(--d-line); color: var(--d-txt); }
.dark-zone .part li::before { color: var(--d-muted); }
.dark-zone .part.p2 .kicker::after { content: none; }

/* ---------- cierre */
.close { border-top: 1px solid var(--d-line); text-align: center; }
.close .kicker { margin-bottom: 24px; }
.close .h2 { max-width: 24ch; margin-inline: auto; }
.close .ctas { justify-content: center; margin-top: 32px; }
.close .pill { min-height: 48px; }
.close .fine { margin-top: 22px; }

.demo-fine { margin: 18px 0 0; font: 400 11.5px/1.6 var(--f-mono); color: var(--d-muted); }

@media (max-width: 820px) {
  .bar-link, .desktop-label { display: none; }
  .phone-label { display: inline; }
  .hb { padding-top: calc(var(--bar-h) + 24px); }
  .hb h1 { font-size: clamp(38px, 11vw, 48px); }
  .hb__fig { margin-inline: calc(var(--gutter) * -1); }
  .hb__fig .screen { border-radius: 0; border-inline: 0; }
  .hb__fig figcaption { padding-inline: var(--gutter); font-size: 10.5px; }
  .modo { margin-top: 44px; gap: 20px; }
  .modo-txt > p:not(.kicker), .imp p:not(.kicker) { font-size: 15.5px; }
  .imp { gap: 44px; }
  .close .ctas { display: grid; }
}

/* ---------- teléfono: láminas (/simuladores/_comun/laminas.css) */
html.lam-on .bridge { height: auto; background: none !important; }
html.lam-on .bridge .stick { position: static; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0; background: none !important; color: inherit !important; overflow: visible; }
html.lam-on .bridge .txt { order: 2; justify-self: start; max-width: none; }
html.lam-on .bridge .txt .h2 { font-size: 28px; margin-bottom: 10px; }
html.lam-on .bridge #pk { color: var(--accent) !important; }
html.lam-on .frame { width: min(84vw, 38svh); justify-self: center; cursor: pointer; }
html.lam-on .hb__fig { margin-inline: -20px; }
html.lam-on .hb .facts { margin: 18px 0 18px; }
html.lam-on .visor-head .h2 { font-size: 34px; }
html.lam-on .specs { margin-top: 18px; }
html.lam-on .car { margin-top: 22px; }
html.lam-on .car-track { margin-inline: -20px; }
html.lam-on .dv { margin-inline: -20px; margin-top: 18px; }
html.lam-on .modo { margin-top: 0; gap: 16px; }
html.lam-on .modo h3 { font-size: 26px; margin: 8px 0 10px; }
html.lam-on .imp h3 { font-size: 26px; }
html.lam-on .close .h2 { font-size: 34px; }
html.lam-on .lam .foot { display: grid; gap: 10px; padding: 18px 0 0; border-top: 1px solid var(--d-line2); }

/* láminas: el modelo del puente sobresale del marco; sin desborde lateral */
html.lam-on #puente { overflow-x: clip; }
html.lam-on #demo .demo-fine { display: none; }