:root {
  --night:#111113;
  --panel:#1c1c20;
  --white:#faf9f7;
  --red:#c0202a;
  --bright:#ff545e;
  --rule:#424247;
  --muted:#c4c3c6;
  --display:Oswald,Impact,"DIN Condensed","Arial Narrow",sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--white);font:16px/1.5 var(--body)}
figure,p,h1,h2,h3{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid #ffadac;outline-offset:3px}
img,video{display:block;width:100%}
.wrap{width:min(1240px,90%);margin:auto}
.label,.film-head,.module-name small{font:700 .78rem/1.4 var(--body);text-transform:uppercase;letter-spacing:.09em}
.skip{position:absolute;top:-100px;z-index:8;background:white;color:#111;padding:12px}
.skip:focus{top:0}
header{border-bottom:1px solid var(--rule)}
nav,.menu,.brand,.actions,.buy,.module-name,.links,.film-head,.film-head span{display:flex;align-items:center}
nav{min-height:65px;justify-content:space-between}
.brand{font:700 1.45rem/1 var(--display);text-transform:uppercase;gap:11px}
.brand i{width:37px;height:11px;transform:skew(-14deg);background:repeating-linear-gradient(90deg,transparent 0 7px,#eee 7px 9px),var(--red);border-left:9px solid #444}
.menu,.links{gap:28px;font-size:.88rem}
.menu a:hover,.links a:hover,.watch:hover{text-decoration:underline;text-underline-offset:4px}
.nav-offer{border-bottom:2px solid var(--red);padding:7px 0}
.cover{background:linear-gradient(118deg,#111113 57%,#1f181b 100%)}
.cover-grid{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center;padding-block:clamp(35px,5.8vw,92px)}
.serie,.marker{display:flex;align-items:center;gap:10px}
.serie:before,.marker:before{content:"";background:var(--red);width:24px;height:5px;transform:skew(-16deg)}
h1,h2,h3,.price strong,.film figcaption strong,.facts b{font-family:var(--display);font-weight:700;line-height:1.04;text-transform:uppercase;letter-spacing:-.035em}
em{font-style:normal;color:inherit}
h1{font-size:clamp(2.85rem,4.6vw,4.9rem);text-wrap:balance;margin:18px 0 20px}
h1 em,.offer em{color:var(--bright)}
.intro{font-size:clamp(1rem,1.2vw,1.14rem);max-width:49ch;color:#ddd}
.intro + .intro { margin-top: 12px; }
.actions{gap:20px;flex-wrap:wrap;margin-top:24px}
.buy{background:var(--red);color:white;padding:14px 20px;gap:22px;width:fit-content;justify-content:space-between;font-weight:700}
.buy:hover{background:#a71923}
.watch{font-weight:600;font-size:.91rem}
.fine{font-size:.77rem;color:var(--muted);margin-top:12px}
.film{border:1px solid var(--rule);border-top:4px solid var(--red);background:#19191b;box-shadow:8px 8px 0 #080808}
.film-head{justify-content:space-between;padding:9px 15px;font-size:.67rem;color:#ddd}.film-head span{gap:8px}
.film-head i{width:8px;height:8px;background:var(--bright);border-radius:50%}
.film video{aspect-ratio:16/9;background:#080808}
.film figcaption{padding:14px 17px 18px}.film figcaption strong{font-size:1.35rem;letter-spacing:0}.film figcaption strong span{color:var(--bright)}
.film figcaption p{font-size:.9rem;color:var(--muted);margin-top:6px;max-width:55ch}
.facts{background:var(--red);color:white}
.facts .wrap{display:flex;align-items:center;gap:5%;min-height:62px}.facts b{font-size:1.8rem;margin-right:4px}.facts .label{margin-left:auto}
.program,.bio,.offer,.faq{padding-block:clamp(48px,6.5vw,94px)}
.marker{margin-bottom:16px}
h2{font-size:clamp(2.5rem,4.3vw,4.6rem)}
h2+p,.bio p+p{margin-top:18px}
.section-intro,.modules article p,.split p:not(.label){color:var(--muted);max-width:56ch}
.section-intro{margin-block:16px 30px}
.modules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.still{position:relative;border-bottom:3px solid var(--red)}
.still img{aspect-ratio:1.67;object-fit:cover}.still span{position:absolute;top:0;left:0;background:var(--night);color:white;padding:5px 9px;font-size:.66rem}
.module-name{margin:14px 0 8px;justify-content:space-between;gap:8px}.module-name small{font-size:.63rem;white-space:nowrap;color:var(--muted)}
.module-name h3{font-size:clamp(1.4rem,2vw,2rem)}
.modules article p{font-size:.94rem}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:8%;align-items:center}
.bio{border-top:1px solid var(--rule)}.bio figure{border-left:6px solid var(--red)}
.bio img{max-height:405px;object-fit:cover;object-position:50% 28%}.bio em{color:var(--bright)}
.offer{background:var(--panel);border-block:1px solid var(--rule)}
.offer .split{grid-template-columns:1.25fr .75fr}.offer h2{margin-top:18px}
.price{border-left:3px solid var(--red);padding-left:30px}.price strong{display:block;font-size:clamp(3.2rem,5vw,5rem);margin:8px 0}
.price strong small{font:1rem var(--body);letter-spacing:0;text-transform:none}.price .buy{margin:16px 0 8px}
.faq{align-items:start}.questions details{border-top:1px solid var(--rule)}details:last-child{border-bottom:1px solid var(--rule)}summary{cursor:pointer;list-style:none;font-weight:700;padding:16px 25px 16px 0;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:4px;color:var(--bright)}details[open] summary:after{content:"−"}details p{padding-bottom:18px}
footer{border-top:1px solid var(--rule)}footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-block:30px}footer small{width:100%;color:var(--muted)}footer small a{text-decoration:underline}.mobile-buy{display:none}
@media(max-width:950px){.modules{grid-template-columns:repeat(2,minmax(0,1fr))}.cover-grid{gap:4%}}
@media(max-width:740px){
  .wrap{width:89%}nav{min-height:56px}.brand{font-size:1.2rem}.menu>a:not(.nav-offer){display:none}
  .cover-grid,.split,.offer .split{grid-template-columns:1fr;gap:25px}.cover-grid{padding-block:29px}
  h1{font-size:clamp(2.4rem,8.5vw,3.8rem);margin:12px 0 14px}.actions{margin-top:17px;gap:14px}.buy{padding:12px 16px}
  .facts .wrap{justify-content:space-between;min-height:52px;gap:8px}.facts span{font-size:.8rem}.facts b{font-size:1.35rem}.facts .label{display:none}
  .modules{gap:24px 14px}.module-name{flex-wrap:wrap}.bio img{max-height:320px}.bio figure{max-width:330px}.bio>div{grid-row:1}.price{padding-left:18px}
  .links{flex-wrap:wrap;gap:14px}footer{padding-bottom:64px}.mobile-buy.visible:not(.reading-story){display:flex;align-items:center;justify-content:space-between;position:fixed;z-index:4;bottom:0;left:0;right:0;padding:8px 5.5% max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:var(--night)}
  .mobile-buy span{font:700 1.35rem var(--display)}.mobile-buy .buy{font-size:.85rem;padding:9px 14px}
}
@media(max-width:380px){.modules{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.watch {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
.watch-arrow {
  display: inline-block;
  line-height: 1;
  color: var(--bright);
  font-size: 1.3em;
}
@media (max-width: 740px) {
  .watch-arrow { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes step-in {
    from { opacity: .3; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes belt-sweep {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  .cover-copy h1 { animation: step-in .5s cubic-bezier(.18,.72,.22,1) both; }
  .in-view { animation: step-in .5s cubic-bezier(.18,.72,.22,1) both; }
  .modules article:nth-child(even) { animation-delay: 75ms; }
  .film { position: relative; }
  .film.in-view::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--bright);
    transform-origin: left;
    animation: belt-sweep .65s ease-out both;
    pointer-events: none;
  }
  .buy b, .watch-arrow { transition: translate .18s ease-out; }
  .watch:is(:hover,:focus-visible) .watch-arrow,
  .buy:is(:hover,:focus-visible) b { translate: 3px 0; }
  @media (max-width: 740px) {
    .watch:is(:hover,:focus-visible) .watch-arrow { translate: 0 3px; }
  }
  @media (hover: hover) and (pointer: fine) {
    .still { overflow: hidden; }
    .still img { transition: transform .35s ease-out; }
    .modules article:hover img { transform: scale(1.045); }
  }
}


/* The teaser keeps the full lesson and its native controls one tap away. */
.mat-player { position: relative; background: #080808; }
.mat-teaser { position: absolute; inset: 0; }
.mat-teaser[hidden] { display: none; }
.mat-teaser button {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 18px; border: 0; cursor: pointer;
  background: linear-gradient(transparent 55%, #000b); color: white;
  font: 700 1rem var(--body); text-shadow: 0 1px 3px #000;
}
.mat-teaser button span {
  display: grid; place-items: center; width: 31px; height: 31px;
  background: var(--red); border-radius: 50%; font-size: .8rem;
  margin-bottom: -5px; text-shadow: none;
}
.mat-teaser button small { margin-left: auto; }
.mat-teaser button:focus-visible { outline: 3px solid white; outline-offset: -4px; }

.student-story { padding-block: clamp(42px, 5vw, 76px); background: #edeae4; color: #19191b; }
.student-story .marker { margin-bottom: 25px; }
.relato {
  display: grid; grid-template-columns: minmax(180px, .74fr) 1.5fr;
  grid-template-rows: 1fr auto; align-items: center; gap: 18px clamp(24px, 5vw, 74px);
}
.student-photo { grid-row: 1 / 3; position: relative; isolation: isolate; }
.student-photo::before {
  content: ""; position: absolute; inset: 7px -7px -7px 7px; background: var(--red); z-index: -1;
}
.student-photo img { height: auto; }
.student-quote { align-self: end; }
.student-quote h2 em { color: var(--red); }
.student-quote blockquote { margin: 18px 0 0; max-width: 46ch; font-size: clamp(1.05rem, 1.65vw, 1.55rem); line-height: 1.45; }
.relato figcaption { align-self: start; border-top: 1px solid #c4bdb7; padding-top: 12px; }
.relato figcaption strong { display: block; font: 700 1.4rem var(--display); text-transform: uppercase; }
.relato figcaption span { color: #555052; font-size: .89rem; }
@media (max-width: 740px) {
  .relato { grid-template-columns: 102px 1fr; grid-template-rows: auto auto; gap: 24px 18px; }
  .student-photo { grid-row: 1; }
  .student-quote { grid-column: 1 / -1; grid-row: 2; }
  .relato figcaption { grid-column: 2; grid-row: 1; align-self: center; border-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes portrait-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
  }
  .relato.in-view .student-photo img { animation: portrait-reveal .65s cubic-bezier(.2,.7,.2,1) both; }
  .relato.in-view .student-quote { animation: step-in .55s .12s both; }
}