/* Public pages: the night hero with the monitor trace, the exam "ficha", "Así funciona" with the
   video slot, and the landing's sections. Uses only the tokens of style.css. */

/* Hero: a night band; the copy is the thesis, the ficha holds the exam's facts */
.hero { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); padding-bottom: 4.5rem; }
.hero .eyebrow { color: var(--coral); }
.hero h1 { color: var(--on-night); max-width: 18ch; }
.hero .lead { color: var(--on-night-muted); }
.hero .note { color: var(--on-night-muted); }
.hero a:not(.btn) { color: var(--on-night); }
.hero .btn-ghost { border-color: rgba(231, 239, 237, .35); color: var(--on-night); }
.hero .btn-ghost:hover { background: var(--night-2); border-color: var(--on-night); color: var(--on-night); }
.hero .empty { background: var(--night-2); border-color: rgba(231, 239, 237, .25); color: var(--on-night-muted); }
.hero-copy { min-width: 0; }
.hero-trace { position: absolute; left: 0; right: 0; bottom: .75rem; width: 100%; height: 3.25rem; pointer-events: none; }
.hero-trace path { fill: none; stroke: var(--teal); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: .75; animation: trace-in 2.2s var(--ease) both; }
@keyframes trace-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* The ficha: the exam's facts as a chart header, in warm sand */
.ficha { background: var(--sand); border-color: var(--sand-2); color: var(--ink); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .55); }
.ficha-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin: 0 0 .75rem; padding-bottom: .65rem; border-bottom: 1px dashed var(--sand-ink); }
.ficha-head .label { margin: 0; color: var(--sand-ink); }
.ficha-head .hero-card-title { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.ficha .hero-date { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.ficha .hero-date strong { color: var(--ink); }
.ficha .facts div { background: var(--surface); border-color: var(--sand-2); }
.ficha .note { color: var(--sand-ink); margin: 0; }
[data-theme="dark"] .ficha .facts div { background: var(--surface-2); }

/* Así funciona */
.how-grid { display: grid; gap: 2rem; align-items: center; }
.steps { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .25rem; }
.step { counter-increment: step; position: relative; padding: .85rem 0 .85rem 3.25rem; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: .95rem; font: 500 .8rem/1.4 var(--mono); letter-spacing: .06em; color: var(--teal); }
.step h3 { margin: 0 0 .2rem; font-size: 1.08rem; }
.step p { margin: 0; color: var(--muted); }
.video-slot { margin: 0; }
.video-frame { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--r-lg); background: var(--night); border: 1px solid var(--night-2); overflow: hidden; box-shadow: var(--shadow-2); }
.video-slot figcaption { margin-top: .6rem; font: .8rem/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; }

/* Landing sections */
.features .card h3 { display: flex; align-items: baseline; gap: .5rem; }
.guarantee-band h2 { margin-top: 0; }
.final-cta h2 { margin-top: 0; }
.final-cta .wrap { display: grid; justify-items: center; gap: .25rem; }
.final-cta form { margin: 0; }

@media (min-width: 48rem) {
  .hero { padding-bottom: 6rem; }
  .hero-trace { height: 4rem; bottom: 1rem; }
  .features { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
  .how-grid { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; }
}
@media (max-width: 30rem) {
  .hero { padding-bottom: 4rem; }
  .hero h1 { font-size: 2rem; }
  .hero .actions .btn { width: 100%; }
  .step { padding-left: 2.6rem; }
}
.price-saving { color: var(--teal-strong); font-weight: 600; font-size: .92rem; margin: 0 0 .5rem; }
/* /t/<slug>: the teacher whose link brought the visitor, in the hero (teacher-persona run, 3 Nov 2026) */
.hero-host { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-weight: 500; }
.hero-host-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.hero-host-photo.tutor-initials { display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }