:root{--fb-accent:#B8322A;--fb-accent-contrast:#ffffff;--fb-code-surface:rgba(20,30,50,.06);--fb-hover:rgba(20,30,50,.05);--fb-danger:#c0392b;--fb-font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--fb-ink:#16191C;--fb-paper:#F1F2EF;--fb-muted:#5D6368;--fb-line:#DFE2DC;--fb-surface:#FFFFFF;--fb-radius:0px;--fb-font-family:"Source Serif 4", Georgia, serif;--fb-font-body:"Source Serif 4", Georgia, serif;--fb-font-heading:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;--fb-text-xs:12px;--fb-text-sm:14px;--fb-text-md:16px;--fb-text-lg:20px;--fb-text-xl:25px;--fb-text-2xl:31px;--fb-text-3xl:39px;--fb-space-1:4px;--fb-space-2:8px;--fb-space-3:12px;--fb-space-4:16px;--fb-space-5:24px;--fb-space-6:32px;--fb-space-7:48px;--fb-space-8:64px;--fb-measure:68ch;--fb-focus:#574df2;--fb-shadow-1:0 1px 3px color-mix(in srgb, #172033 10%, transparent);--fb-shadow-2:0 4px 12px color-mix(in srgb, #172033 14%, transparent);--fb-shadow-3:0 12px 32px color-mix(in srgb, #172033 20%, transparent);--fb-mark:color-mix(in srgb,var(--fb-accent-2,var(--fb-accent)) 30%,transparent);--accent:var(--fb-accent);--ink:var(--fb-ink);--paper:var(--fb-paper);--muted:var(--fb-muted);--line:var(--fb-line);--surface:var(--fb-surface);--fb-band:#172033;--fb-band-ink:#ffffff;--fb-accent-ink:#3d33c4;--fb-band-muted:#b8c0d0;--fb-accent-wash:#eeedfe;font-family:var(--fb-font-body)}h1,h2,h3,h4,h5,h6{font-family:var(--fb-font-heading)}mark{background:var(--fb-mark);color:inherit}:focus-visible{outline:2px solid var(--fb-focus);outline-offset:2px}html[data-fb-theme="default"]{--fb-ink:#16191C;--fb-line:#DFE2DC;--fb-focus:#B8322A;--fb-muted:#5D6368;--fb-paper:#F1F2EF;--fb-accent:#B8322A;--fb-radius:0px;--fb-surface:#FFFFFF;--fb-shadow-1:0 1px 3px color-mix(in srgb, #16191C 10%, transparent);--fb-shadow-2:0 4px 12px color-mix(in srgb, #16191C 14%, transparent);--fb-shadow-3:0 12px 32px color-mix(in srgb, #16191C 20%, transparent);--fb-accent-contrast:#FFFFFF;}@media (prefers-color-scheme:light){html:not([data-fb-theme]){--fb-ink:#16191C;--fb-line:#DFE2DC;--fb-focus:#B8322A;--fb-muted:#5D6368;--fb-paper:#F1F2EF;--fb-accent:#B8322A;--fb-radius:0px;--fb-surface:#FFFFFF;--fb-shadow-1:0 1px 3px color-mix(in srgb, #16191C 10%, transparent);--fb-shadow-2:0 4px 12px color-mix(in srgb, #16191C 14%, transparent);--fb-shadow-3:0 12px 32px color-mix(in srgb, #16191C 20%, transparent);--fb-accent-contrast:#FFFFFF;}}@media (prefers-color-scheme:dark){html:not([data-fb-theme]){--fb-ink:#16191C;--fb-line:#DFE2DC;--fb-focus:#B8322A;--fb-muted:#5D6368;--fb-paper:#F1F2EF;--fb-accent:#B8322A;--fb-radius:0px;--fb-surface:#FFFFFF;--fb-shadow-1:0 1px 3px color-mix(in srgb, #16191C 10%, transparent);--fb-shadow-2:0 4px 12px color-mix(in srgb, #16191C 14%, transparent);--fb-shadow-3:0 12px 32px color-mix(in srgb, #16191C 20%, transparent);--fb-accent-contrast:#FFFFFF;}}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url("../_fonts/1/source-serif-4-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url("../_fonts/1/source-serif-4-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url("../_fonts/1/source-serif-4-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url("../_fonts/1/source-serif-4-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
.fb-block{grid-column:1/-1;flex-basis:100%}
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}.sc-nav>a,.sc-nav>.sc-nav-item{max-width:min(16rem,25vw);overflow-wrap:break-word}
.sc-nav-item{position:relative;display:inline-flex;align-items:center}.sc-nav-sub{position:absolute;left:0;top:100%;z-index:50;display:flex;flex-direction:column;width:max-content;max-width:min(20rem,calc(100vw - 16px));gap:1px;padding:5px;margin-top:6px;background:var(--fb-paper,#fff);border:1px solid color-mix(in srgb, var(--fb-line,rgba(20,30,50,.18)) 55%, transparent);border-radius:calc(var(--fb-radius,12px) * .4);box-shadow:var(--fb-shadow-1,0 1px 3px rgb(15 23 42 / 10%)),var(--fb-shadow-2,0 4px 12px rgb(15 23 42 / 14%));visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity 140ms ease,transform 140ms ease,visibility 0s linear 140ms}.sc-nav-sub::before{content:"";position:absolute;left:0;right:0;top:-7px;height:7px}.sc-nav-sub .sc-nav-sub{top:18px;left:100%;margin:0 0 0 6px}.sc-nav-sub .sc-nav-sub::before{left:-7px;right:auto;top:-26px;bottom:0;width:7px;height:auto}.sc-nav>.sc-nav-item:last-child>.sc-nav-sub{left:auto;right:0}.sc-nav>.sc-nav-item:last-child .sc-nav-sub .sc-nav-sub{left:auto;right:100%;margin:0 6px 0 0}.sc-nav>.sc-nav-item:last-child .sc-nav-sub .sc-nav-sub::before{left:auto;right:-7px}.sc-nav .sc-nav-has-children>a{display:flex;align-items:center;gap:6px}.sc-nav .sc-nav-has-children>a::after{content:"";display:inline-block;flex:none;width:0;height:0;vertical-align:middle;border:4px solid transparent;border-top-color:currentColor;border-bottom-width:0;margin-top:1px;opacity:.6}.sc-nav-sub .sc-nav-has-children>a{justify-content:space-between}.sc-nav-sub .sc-nav-has-children>a::after{border:4px solid transparent;border-left-color:currentColor;border-right-width:0;margin:0 0 0 6px}.sc-nav-has-children:hover>.sc-nav-sub,.sc-nav-has-children:focus-within>.sc-nav-sub{visibility:visible;opacity:1;transform:translateY(0);transition:opacity 140ms ease,transform 140ms ease,visibility 0s}.sc-nav-sub>a,.sc-nav-sub .sc-nav-item>a{display:block;padding:7px 11px;overflow-wrap:anywhere;border-radius:calc(var(--fb-radius,12px) * .28);transition:background-color 120ms ease,color 120ms ease}.sc-nav-sub>a:hover,.sc-nav-sub>a:focus-visible{background:var(--fb-hover,rgba(20,30,50,.06))}@media (prefers-reduced-motion:reduce){.sc-nav-sub{transform:none;transition:none}.sc-nav-has-children:hover>.sc-nav-sub,.sc-nav-has-children:focus-within>.sc-nav-sub{transform:none;transition:none}}.sc-page-index a[data-depth="1"]{margin-left:var(--fb-space-4,16px)}.sc-page-index a[data-depth="2"]{margin-left:var(--fb-space-6,32px)}.sc-page-index a[data-depth="3"]{margin-left:var(--fb-space-7,48px)}
/* styles/site.css */
/* Doce lunes · Bitácora del jefe (aula privada de la Academia Tu Imperio Mental).
   La marca es la de la vitrina: fondo tiza, tinta, un solo acento rojo lunes, esquinas rectas,
   Schibsted Grotesk para títulos y Source Serif 4 para el texto. Los colores salen siempre de las
   fichas del tema (--fb-*); aquí no se escribe ningún color fijo. DESIGN.md explica cada regla.

   Clases, y para qué sirve cada una:
   .container       la columna centrada
   .site-header     la barra de arriba: .brand (marca + «Academia»), fb-nav y .header-actions
   .site-footer     el pie de todas las páginas
   .section         un bloque de la página; .section-head lo abre (título y bajada)
   .kicker          antetítulo en mayúsculas rojas; uno cada tres secciones como máximo
   .lead            bajada en serif, más grande
   .btn             la acción principal: fondo tinta, texto blanco, esquinas rectas (una por vista)
   .link-line       la acción de al lado: texto con subrayado rojo lunes
   .aula-hero       portada del aula: título grande, aparte con bajada y acciones, foto con .hero-mark
   .hero-mark       el óvalo rojo «lun 01» que se dibuja solo sobre una casilla de sombra de la foto
   .ah-trailer      el tráiler que reemplaza la foto de la portada, en la hoja perforada de la cápsula 01
   .lm-strip        LA TIRA DE LOS LUNES (elemento firma): .lm-track con .lm-sheet; .lm-first es la primera
   .lm-ellipse      el óvalo dibujado a mano alrededor de un número
   .sheet           una hoja de calendario suelta, con el borde de arriba perforado
   .torn            hoja arrancada: inclinada, con el borde de abajo rasgado
   .rows            lista con líneas finas: número rojo, título y texto
   .callout         nota honesta con una regla roja a la izquierda
   .cap-crumbs      la miga de arriba de una cápsula (volver al aula, «cápsula N de 12»)
   .cap-grid        cabeza de una cápsula: .cap-sheet (la hoja del lunes) al lado de .cap-body
   .cap-video       el reproductor de la cápsula, en proporción 16:9
   .script          el guion «para decir tal cual», en una hoja blanca
   .notes           consejos cortos con líneas finas
   .week            los siete días como casillas de calendario
   .questions       las preguntas del cuaderno, numeradas en rojo
   .monday          la frase para el lunes en una hoja arrancada
   .cap-pager       lunes anterior y lunes siguiente
   Movimiento: solo CSS, al cargar, y nada se mueve si la persona pidió menos movimiento. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("https://app.thefusebase.com/box/file/80484b38-26fa-4c96-933d-f1fcf91bdef3/SchibstedGrotesk-latin.woff2") format("woff2");
}

:root {
  --page-width: 1240px;
  --gutter: clamp(16px, 5vw, 80px);
  --section-space: clamp(56px, 8vw, 112px);
  /* Derivados de las fichas del tema (sin colores fijos). */
  --answer: color-mix(in srgb, var(--fb-ink) 76%, var(--fb-paper));
  --line-strong: color-mix(in srgb, var(--fb-line) 88%, var(--fb-ink));
  --shadow: color-mix(in srgb, var(--fb-ink) 55%, transparent);
  --heading: var(--fb-font-heading);
  --body: var(--fb-font-body);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--fb-paper);
  color: var(--fb-ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--fb-accent);
  outline-offset: 4px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--heading);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

p,
ol,
ul,
blockquote,
figure {
  margin: 0;
}

.container {
  width: min(var(--page-width), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Encabezado y pie */

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  min-height: 72px;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}

.brand-name {
  font-family: var(--heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-tag {
  color: var(--fb-accent);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-header .sc-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
}

.site-header .sc-nav ul {
  display: flex;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header .sc-nav a {
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.site-header .sc-nav a[aria-current="page"] {
  text-decoration: underline 2px var(--fb-accent);
  text-underline-offset: 6px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.site-footer {
  margin-top: var(--section-space);
  border-top: 1px solid var(--line-strong);
  color: var(--fb-muted);
  font-family: var(--heading);
  font-size: 13px;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  padding-block: 28px 44px;
}

.site-footer .brand-name {
  color: var(--fb-ink);
  font-size: 14px;
}

/* Piezas comunes */

.section {
  padding-block: var(--section-space) 0;
}

.section-head {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.section-head h2 {
  font-size: clamp(30px, 3.6vw, 54px);
}

.kicker {
  color: var(--fb-accent);
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.lead {
  color: var(--fb-ink);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  max-width: 44ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 22px;
  border: 1px solid var(--fb-ink);
  border-radius: var(--fb-radius, 0);
  background: var(--fb-ink);
  color: var(--fb-surface);
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  box-shadow: 0 12px 22px -16px var(--fb-ink);
  transform: translateY(-2px);
}

.link-line {
  display: inline-block;
  padding: 10px 0 3px;
  border-bottom: 2px solid var(--fb-accent);
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.meta {
  color: var(--fb-muted);
  font-family: var(--heading);
  font-size: 13px;
  line-height: 1.5;
}

/* Portada del aula */

.aula-hero {
  overflow: hidden;
  padding-top: clamp(28px, 5vw, 56px);
}

.ah-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 31%);
  align-items: end;
  gap: 28px 64px;
  padding-bottom: 40px;
}

.ah-title {
  display: grid;
  gap: 20px;
}

.ah-headline {
  font-size: clamp(42px, 5.7vw, 96px);
  line-height: 0.98;
}

.ah-word {
  display: inline-block;
}

.ah-aside {
  display: grid;
  gap: 20px;
  padding-bottom: 8px;
}

.ah-frame {
  position: relative;
  height: 74vh;
  min-height: 420px;
  max-height: 760px;
  overflow: hidden;
}

.ah-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Aviso bajo el tráiler: el video arranca sin sonido y el navegador solo deja activarlo con un toque. */
.ah-sound {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 18px 0 0;
  color: var(--fb-ink);
  font-family: var(--heading);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  text-align: center;
}

.ah-sound svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: var(--fb-accent, #B8322A);
  stroke: var(--fb-accent, #B8322A);
  stroke-width: 0;
}

.ah-sound svg .onda {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.hero-mark {
  position: absolute;
  top: 20%;
  left: 17%;
  width: clamp(96px, 11vw, 170px);
  aspect-ratio: 120 / 150;
  pointer-events: none;
}

.hero-mark svg {
  max-width: none;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-mark path {
  fill: none;
  stroke: var(--fb-accent);
  stroke-dasharray: 560;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.hero-mark span {
  position: absolute;
  top: -14px;
  left: 78%;
  color: var(--fb-accent);
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  white-space: nowrap;
}

/* La tira de los lunes (elemento firma) */

.lm-strip {
  overflow: hidden;
  padding-top: calc(var(--section-space) * 0.6);
}

.lm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 34px;
}

.lm-head h2 {
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1;
}

.lm-note {
  color: var(--fb-muted);
  font-size: 14px;
  white-space: nowrap;
}

.lm-track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 18px max(var(--gutter), (100% - var(--page-width)) / 2) 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-padding-left: max(var(--gutter), (100% - var(--page-width)) / 2);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.lm-track::-webkit-scrollbar {
  display: none;
}

.lm-sheet {
  position: relative;
  flex: 0 0 calc(14.28571% - 13.71429px);
  min-width: 168px;
  scroll-snap-align: start;
}

/* La inclinación y el hover van en la hoja (.lm-paper), no en el li: el li lo mueve Studio al aparecer. */
.lm-first .lm-paper {
  transform: translateY(-8px) rotate(-2deg);
  transform-origin: 50% 0;
}

.lm-sheet:hover .lm-paper {
  transform: translateY(-7px);
}

.lm-first:hover .lm-paper {
  transform: translateY(-14px) rotate(-2deg);
}

.lm-paper {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 330px;
  padding: 36px 24px 24px;
  border-radius: var(--fb-radius, 0);
  background: var(--fb-surface);
  box-shadow: 0 5px 12px -10px var(--fb-ink);
  color: var(--fb-ink);
  text-decoration: none;
  transition: transform 0.28s ease, box-shadow 0.5s ease 0.15s;
}

.lm-paper::before,
.sheet::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 13px;
  background: radial-gradient(circle at 8px 0, var(--fb-paper) 0 5px, transparent 5.5px) 0 0 / 16px 13px repeat-x;
  pointer-events: none;
}

.lm-first .lm-paper {
  box-shadow: 0 18px 24px -13px var(--fb-ink);
}

.lm-weekday {
  margin-bottom: 14px;
  color: var(--fb-muted);
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
}

.lm-number-wrap {
  position: relative;
  width: max-content;
  margin-bottom: 14px;
}

.lm-number {
  position: relative;
  z-index: 1;
  font-family: var(--heading);
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.88;
}

.lm-ellipse {
  position: absolute;
  max-width: none;
  z-index: 0;
  top: -20px;
  left: -22px;
  width: calc(100% + 46px);
  height: calc(100% + 38px);
  overflow: visible;
  pointer-events: none;
}

.lm-ellipse path {
  fill: none;
  stroke: var(--fb-accent);
  stroke-dasharray: 430;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
  vector-effect: non-scaling-stroke;
}

.lm-title {
  font-family: var(--heading);
  font-weight: 800;
  font-size: clamp(16px, 1.45vw, 23px);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.lm-phrase {
  margin-top: 13px;
  color: var(--fb-muted);
  font-size: clamp(15px, 1.18vw, 19px);
  font-style: italic;
  line-height: 1.23;
}

.lm-duration {
  margin-top: auto;
  padding-top: 24px;
  color: var(--fb-muted);
  font-family: var(--heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Hoja suelta y hoja arrancada */

.sheet {
  position: relative;
  padding: clamp(32px, 4vw, 48px) clamp(22px, 4vw, 48px) clamp(26px, 3vw, 40px);
  background: var(--fb-surface);
  box-shadow: 0 10px 20px -16px var(--fb-ink);
}

.torn {
  position: relative;
  padding-bottom: clamp(48px, 5vw, 64px);
  transform: rotate(-3deg);
}

.torn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 22px;
  background: var(--fb-paper);
  clip-path: polygon(0 30%, 4% 48%, 8% 20%, 12% 56%, 17% 28%, 22% 62%, 28% 25%, 33% 52%, 39% 17%, 44% 56%, 50% 27%, 56% 62%, 62% 22%, 68% 55%, 74% 20%, 80% 58%, 86% 25%, 92% 54%, 97% 18%, 100% 42%, 100% 100%, 0 100%);
}

/* Cómo usar el aula */

.rows {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  counter-reset: row;
  list-style: none;
}

.rows > li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 17rem) minmax(0, 1fr);
  gap: 6px 32px;
  align-items: baseline;
  padding-block: 22px;
  border-bottom: 1px solid var(--line-strong);
  counter-increment: row;
}

.rows > li::before {
  content: counter(row, decimal-leading-zero);
  color: var(--fb-accent);
  font-family: var(--heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.rows b {
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.rows span {
  color: var(--answer);
}

.rows-close {
  max-width: 64ch;
  margin-top: 24px;
  color: var(--answer);
}

/* El cuaderno */

.book {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: start;
}

.book-copy {
  display: grid;
  gap: 16px;
}

.book-copy h2 {
  font-size: clamp(28px, 3vw, 44px);
}

.book-copy .actions {
  margin-top: 10px;
}

.book-map {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--fb-line);
}

.book-map > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--fb-line);
}

.book-map dt {
  font-size: 16px;
}

.book-map dd {
  margin: 0;
  color: var(--fb-muted);
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Nota honesta */

.callout {
  display: grid;
  gap: 12px;
  max-width: 72ch;
  padding-left: 22px;
  border-left: 3px solid var(--fb-accent);
  color: var(--answer);
  font-size: 16px;
}

.callout h2 {
  color: var(--fb-ink);
  font-size: 22px;
  letter-spacing: -0.02em;
}

/* Página de una cápsula */

.cap-crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: clamp(20px, 3vw, 32px);
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 600;
}

.cap-crumbs a {
  text-decoration: none;
}

.cap-crumbs a:hover {
  text-decoration: underline 2px var(--fb-accent);
  text-underline-offset: 6px;
}

.cap-crumbs span {
  color: var(--fb-muted);
}

.cap-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 40px clamp(32px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(28px, 4vw, 48px);
}

.cap-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 44px 30px 28px;
  background: var(--fb-surface);
  box-shadow: 0 18px 24px -13px var(--fb-ink);
  transform: rotate(-2deg);
  transform-origin: 50% 0;
}

.cap-sheet::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 13px;
  background: radial-gradient(circle at 8px 0, var(--fb-paper) 0 5px, transparent 5.5px) 0 0 / 16px 13px repeat-x;
}

.cap-sheet .lm-number {
  font-size: clamp(76px, 8vw, 124px);
  font-weight: 900;
}

.cap-sheet .lm-number-wrap {
  margin-bottom: 26px;
}

.cap-sheet h1 {
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.04;
}

.cap-sheet .lm-phrase {
  margin-top: 16px;
  font-size: clamp(18px, 1.5vw, 21px);
}

.cap-body {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.cap-situation {
  display: grid;
  gap: 8px;
  max-width: 62ch;
}

.cap-situation b {
  color: var(--fb-muted);
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 600;
}

.cap-situation p {
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.38;
}

.cap-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--fb-ink);
}

.cap-video > *,
.cap-video iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.cap-section {
  display: grid;
  gap: 22px;
  max-width: 880px;
  padding-top: var(--section-space);
}

.cap-section > h2 {
  font-size: clamp(28px, 3vw, 44px);
}

.cap-section > .lead {
  max-width: 62ch;
}

.script {
  display: grid;
  gap: 14px;
}

.script .say {
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.42;
}

.notes {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.notes > li {
  padding-block: 14px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--answer);
}

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line-strong);
  background: var(--fb-surface);
}

.week > span {
  min-width: 0;
  padding: 10px 8px 38px;
  border-right: 1px solid var(--fb-line);
  color: var(--fb-muted);
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.week > span:first-child {
  color: var(--fb-accent);
}

.week > span:last-child {
  border-right: 0;
}

.questions {
  margin: 0;
  padding: 0;
  counter-reset: q;
  list-style: none;
}

.questions > li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--fb-line);
  counter-increment: q;
}

.questions > li::before {
  content: counter(q);
  color: var(--fb-accent);
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.monday {
  max-width: 560px;
  padding: clamp(36px, 4vw, 48px) clamp(26px, 4vw, 44px) 64px;
}

.monday .phrase {
  font-size: clamp(26px, 3vw, 40px);
  font-style: italic;
  line-height: 1.16;
}

.monday .meta {
  margin-top: 18px;
}

.monday .kicker {
  margin-bottom: 16px;
}

.cap-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: var(--section-space);
  border-top: 1px solid var(--line-strong);
}

.cap-pager a {
  display: grid;
  gap: 6px;
  padding-block: 24px;
  text-decoration: none;
}

.cap-pager a:hover b {
  text-decoration: underline 2px var(--fb-accent);
  text-underline-offset: 6px;
}

.cap-pager .next {
  justify-self: end;
  text-align: right;
}

.cap-pager small {
  color: var(--fb-muted);
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cap-pager b {
  font-family: var(--heading);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Movimiento con intención: suave, al cargar, solo CSS */

@media (prefers-reduced-motion: no-preference) {
  .ah-word {
    animation: wordIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .ah-aside {
    animation: fadeIn 0.6s ease 0.6s both;
  }

  .ah-frame {
    animation: imgIn 0.9s ease 0.25s both;
  }

  .hero-mark path {
    stroke-dashoffset: 560;
    animation: draw 1.3s cubic-bezier(0.6, 0.05, 0.3, 1) 1.4s forwards;
  }

  .hero-mark span {
    animation: fadeIn 0.5s ease 2.4s both;
  }

  .lm-ellipse path {
    stroke-dashoffset: 430;
    animation: draw 1.15s cubic-bezier(0.55, 0.05, 0.25, 1) 0.9s forwards;
  }

  .cap-sheet {
    animation: sheetIn 0.6s ease both;
  }
}

@keyframes wordIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

@keyframes imgIn {
  from {
    opacity: 0;
    transform: scale(1.015);
  }
}

@keyframes sheetIn {
  from {
    translate: 0 18px;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Tableta y celular */

@media (max-width: 900px) {
  .ah-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 28px;
  }

  .ah-frame {
    height: 62vw;
    min-height: 300px;
  }

  .lm-sheet {
    flex-basis: calc(31.25% - 10px);
  }

  .lm-paper {
    min-height: 300px;
  }

  .book,
  .cap-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cap-sheet {
    width: min(100%, 360px);
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .rows > li {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .rows > li > span {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .header-actions {
    display: none;
  }

  .ah-frame {
    height: 112vw;
    max-height: none;
    min-height: 0;
  }

  .ah-frame > img {
    object-position: 86% 50%;
  }

  .hero-mark {
    display: none;
  }

  .ah-aside .btn {
    width: 100%;
  }

  .lm-head {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
  }

  .lm-sheet {
    flex-basis: calc(45.45455% - 8.63636px);
  }

  .lm-paper {
    min-height: 290px;
    padding: 34px 20px 20px;
  }

  .lm-title {
    font-size: 18px;
  }

  .lm-phrase {
    font-size: 16px;
  }

  .lm-ellipse {
    top: -15px;
    left: -16px;
    width: calc(100% + 34px);
    height: calc(100% + 30px);
  }

  .week > span {
    padding: 8px 4px 30px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .cap-pager {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cap-pager .next {
    justify-self: stretch;
    border-top: 1px solid var(--fb-line);
    text-align: left;
  }

  .torn {
    transform: rotate(-1.5deg);
  }
}

/* Secciones de la portada traídas de la vitrina (29 oct 2026, a pedido de Peter): así suena una jugada, la cápsula 01
   en video, dentro de las cápsulas, para quién es, lo que tienes y preguntas frecuentes. */

.sample {
  display: grid;
  gap: 20px;
  max-width: 980px;
}

.sample-quote {
  margin: 0;
}

.sample-quote p {
  font-size: clamp(23px, 2.5vw, 36px);
  line-height: 1.32;
}

.sample-note {
  max-width: 64ch;
  color: var(--answer);
}

.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: start;
}

.start-copy {
  display: grid;
  gap: 20px;
}

.start-copy h2 {
  font-size: clamp(42px, 5.2vw, 88px);
  line-height: 0.98;
}

.start-media {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.start-sheet {
  padding: clamp(28px, 3vw, 44px) clamp(18px, 2.4vw, 40px) clamp(18px, 2.4vw, 40px);
}

.start-caption {
  color: var(--answer);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
}

.inside-track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 max(var(--gutter), (100% - var(--page-width)) / 2) 12px;
  overflow-x: auto;
  list-style: none;
  scroll-padding-left: max(var(--gutter), (100% - var(--page-width)) / 2);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.inside-track::-webkit-scrollbar {
  display: none;
}

.inside-item {
  flex: 0 0 min(440px, 78%);
  scroll-snap-align: start;
}

.inside-item a {
  display: grid;
  gap: 10px;
  text-decoration: none;
}

.inside-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.inside-title {
  font-family: var(--heading);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.inside-line {
  color: var(--fb-muted);
  font-size: 16px;
  font-style: italic;
}

.included {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.included li {
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--fb-line);
  background: linear-gradient(var(--fb-accent), var(--fb-accent)) 0 1.05em / 12px 2px no-repeat;
}

.faq {
  max-width: 880px;
  border-top: 1px solid var(--line-strong);
}

.faq details {
  border-bottom: 1px solid var(--line-strong);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 20px;
  cursor: pointer;
  font-family: var(--heading);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--fb-accent);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  max-width: 68ch;
  padding-bottom: 22px;
  color: var(--answer);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--fb-ink);
}

@media (max-width: 900px) {
  .start-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Más movimiento (29 oct 2026, a pedido de Peter, como la landing de Cumbre), siempre solo CSS:
   - las secciones aparecen al bajar con data-fb-motion="reveal" (del compilador de Studio, respeta «menos movimiento»);
   - las cifras cuentan con data-fb-motion="count";
   - la cinta de las frases para el lunes corre sola (.ticker);
   - las flechas de «Desliza» empujan hacia el lado (nudge). */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin: 0 0 clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.figures > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding: 18px 16px 18px 0;
}

.figures dd {
  margin: 0;
  color: var(--fb-accent);
  font-family: var(--heading);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.figures dt {
  color: var(--fb-muted);
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ticker {
  margin-top: var(--section-space);
  overflow: hidden;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--fb-surface);
}

.ticker-track {
  display: flex;
  width: max-content;
}

.ticker-run {
  display: flex;
  flex: none;
  gap: 56px;
  padding: 18px 56px 18px 0;
  white-space: nowrap;
}

.ticker-run span {
  font-size: clamp(18px, 1.6vw, 22px);
  font-style: italic;
}

.ticker-run b {
  margin-right: 10px;
  color: var(--fb-accent);
  font-family: var(--heading);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
}

@media (prefers-reduced-motion: no-preference) {
  .ticker-track {
    animation: ticker 70s linear infinite;
  }

  .ticker:hover .ticker-track {
    animation-play-state: paused;
  }

  .lm-note {
    animation: nudge 2.2s ease-in-out infinite;
  }
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

@keyframes nudge {
  50% {
    transform: translateX(5px);
  }
}

/* La tira «se pega» hoja por hoja al bajar (29 oct 2026, idea de Peter). Studio marca cada hoja con
   data-fb-motion-state="before" e "in" cuando entra en pantalla; aquí se cambia solo cómo entra: cae desde arriba,
   un poco girada y grande, y se asienta con un pequeño rebote, como una hoja que se pega en la pared. La sombra
   pasa de levantada a apoyada. Con «reducir movimiento», Studio no mueve nada y las hojas se ven quietas. */
html[data-fb-motion-ready] .lm-sheet[data-fb-motion="reveal"] {
  transition: opacity 320ms ease-out var(--fb-motion-delay, 0ms), transform 680ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--fb-motion-delay, 0ms);
}

html[data-fb-motion-ready] .lm-sheet[data-fb-motion="reveal"][data-fb-motion-state="before"] {
  opacity: 0;
  transform: translate3d(0, -48px, 0) rotate(-7deg) scale(1.08);
}

html[data-fb-motion-ready] .lm-sheet[data-fb-motion="reveal"][data-fb-motion-state="before"]:nth-child(even) {
  transform: translate3d(0, -48px, 0) rotate(6deg) scale(1.08);
}

html[data-fb-motion-ready] .lm-sheet[data-fb-motion-state="before"] .lm-paper {
  box-shadow: 0 34px 40px -22px var(--fb-ink);
}

html[data-fb-motion-ready] .lm-sheet[data-fb-motion-state] .lm-ellipse path {
  stroke-dashoffset: 430;
  animation: none;
}

html[data-fb-motion-ready] .lm-sheet[data-fb-motion-state="in"] .lm-ellipse path {
  animation: draw 1.15s cubic-bezier(0.55, 0.05, 0.25, 1) 0.7s forwards;
}