/* Shared Clean proportions for both palettes. Source pages keep their original ratio. */
:root{
  --episode-width:205px;
  --poster-height:314px;
  --poster-copy-height:160px;
  --cover-radius:8px;
}
.cinema-hero{
  display:grid;grid-template-columns:1.05fr 1fr;gap:48px;
  align-items:center;min-height:0;padding:48px 5% 65px;overflow:visible;
}
.cinema-hero:after{display:none}
.cinema-hero>img{
  position:static;grid-column:2;grid-row:1;width:100%;height:420px;
  border-radius:16px;object-fit:cover;object-position:center 38%;opacity:1;filter:none;
}
.hero-text{grid-column:1;grid-row:1;max-width:100%;min-width:0}
.hero-text h1{font-size:clamp(43px,4.6vw,68px);letter-spacing:-2px}
.hero-side{display:none}
.catalog{margin-top:0}
.episode{width:var(--episode-width);flex:0 0 var(--episode-width);min-width:0}
.poster,.content-grid .poster{
  display:grid;grid-template-rows:minmax(0,1fr) var(--poster-copy-height);
  height:var(--poster-height);border-radius:var(--cover-radius);
  background:var(--panel);
}
.poster:before,.poster:after{display:none}
.poster img,.poster img[src^="assets/capas/"],.poster img[src^="paginas/"]{
  display:block;width:100%;height:100%;min-height:0;
  object-fit:cover;object-position:center top;opacity:1;filter:none;transform:none;
}
.poster-copy{
  position:static;min-width:0;min-height:0;padding:18px;
  background:var(--panel);display:flex;flex-direction:column;justify-content:center;
}
.poster-number,.poster-top b{display:none}
.poster h3,.content-grid .poster h3{
  font-size:22px;font-weight:500;letter-spacing:-.5px;line-height:1.12;
  overflow-wrap:anywhere;
}
.poster small{font-size:7px;letter-spacing:1px;margin-top:12px}
.poster-top{
  top:12px;left:12px;right:auto;border-radius:4px;padding:6px 8px;
  background:var(--panel);color:var(--text);text-shadow:none;letter-spacing:1px;font-size:6px;
}
.poster .play{top:64px;background:var(--panel);color:var(--text);border-color:var(--line)}
.completed-tag{top:42px;left:12px}
.content-grid{align-items:start}
.trail-card,.lesson-hero{border-top:3px solid var(--tone)}
/* Equal rows and aligned actions even with different title lengths or saved results. */
.trail-overview,.quiz-grid{align-items:stretch;grid-auto-rows:1fr}
.quiz-card{display:flex;flex-direction:column;min-width:0}
.quiz-card h2{min-height:2.24em}
.quiz-card dl{margin-top:auto;padding-top:24px;margin-bottom:0}
.quiz-card .quiz-actions{margin-top:24px}
.quiz-card .quiz-actions .btn{flex:1 1 auto}
.quiz-card .quiz-actions{min-height:42px}
/* Notes are variable-length documents, so their cards grow with their text. */
@media(min-width:1500px){
  :root{--episode-width:240px;--poster-height:340px}
}
@media(max-width:1050px){
  .cinema-hero{gap:28px;padding-top:35px;padding-bottom:45px}
  .cinema-hero>img{height:370px}
  .hero-text h1{font-size:46px}
}
@media(max-width:760px){
  :root{--episode-width:177px;--poster-height:294px}
  .cinema-hero{
    display:flex;flex-direction:column-reverse;align-items:stretch;
    gap:28px;padding:32px 5% 38px;
  }
  .cinema-hero>img{height:250px;object-position:center 38%}
  .hero-text h1{font-size:44px;letter-spacing:-1.6px}
  .poster-copy{padding:15px}
  .poster h3,.content-grid .poster h3{font-size:20px}
  .poster .play{top:64px}
}
@media(max-width:380px){
  .poster-copy{padding:12px}
  .poster h3,.content-grid .poster h3{font-size:19px}
}