/* Generated from marca/tokens.json. */
:root { --e-1: 4px;
--e-2: 8px;
--e-4: 16px;
--e-6: 24px;
--e-10: 40px;
--e-20: 80px;
--r-chico: 10px;
--r-globo: 28px;
--r-mirilla: 999px;
--font-display: "Grandstander", "Arial Rounded MT Bold", sans-serif;
--font-texto: "Source Sans 3", "Segoe UI", Arial, sans-serif;
--font-logo: "Bricolage Grotesque", "Arial Black", sans-serif;
--film-text:#fbf8f3;
--film-shade:#15161d;
--film-blue:#1f2a3d; --papel: #fbf8f3;
--superficie: #ffffff;
--tinta: #15161d;
--tinta-suave: #5d5a63;
--violeta: #8341fc;
--azul: #0969e2;
--rosa: rgb(255, 114, 160);
--rosa-texto: #d60046;
--rosa-suave: #ffe9f1;
--aguamarina: #7fdcc8;
--aguamarina-texto: #217866;
--violeta-suave: #f1eafe;
--azul-suave: #e7f0fd;
--foco: var(--violeta);
--logo-light:block; --logo-dark:none; color-scheme: light; }
/* Sin tema oscuro automático (Ender 26-oct: «ese fondo negro… lejos de Migzy»). El sitio es siempre claro. */
.tipo-portada { font-family: var(--font-display); font-size: 64px;
line-height: 62px;
font-weight: 700;
letter-spacing: -0.03em; }
.tipo-h1 { font-family: var(--font-display); font-size: 44px;
line-height: 46px;
font-weight: 600;
letter-spacing: -0.02em; }
.tipo-h2 { font-family: var(--font-display); font-size: 30px;
line-height: 34px;
font-weight: 600;
letter-spacing: -0.01em; }
.tipo-h3 { font-family: var(--font-display); font-size: 22px;
line-height: 28px;
font-weight: 600; }
.tipo-cuerpo { font-family: var(--font-texto); font-size: 19px;
line-height: 31px;
font-weight: 400; }
.tipo-cuerpo-chico { font-family: var(--font-texto); font-size: 17px;
line-height: 26px;
font-weight: 400; }
.tipo-globo { font-family: var(--font-texto); font-size: 18px;
line-height: 26px;
font-weight: 700; }
.tipo-etiqueta { font-family: var(--font-texto); font-size: 14px;
line-height: 18px;
font-weight: 700;
letter-spacing: 0.08em; }
@font-face{font-family:Grandstander;src:url('/fonts/grandstander-0.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/fonts/source-sans-3-0.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/fonts/source-sans-3-1.ttf') format('truetype');font-weight:600 900;font-display:swap}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--e-6); }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 20px/1.65 var(--font-texto); }
a { color: var(--violeta); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
figure, p, h1, h2, h3 { margin: 0; }
button, input { font: inherit; }
/* Margen lateral único de la web (Ender 27-oct: «revisar esa sangría en toda la web de lado y lado»): 16 px en celular, crece hasta 48 px. */
:root { --margen: clamp(16px, 4vw, 48px); }
.shell { width: min(100%, 1216px); margin-inline: auto; padding-inline: var(--margen); }
.skip-link { position: absolute; left: var(--e-4); top: -100px; padding: var(--e-4); background: var(--superficie); z-index: 5; }
.skip-link:focus { top: var(--e-4); }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-6); padding-block: var(--e-6); border-bottom: 1px solid var(--tinta-suave); }
.identity { display: block; color: var(--tinta); text-decoration: none; }
.wordmark { width: 240px; height: auto; margin-bottom: var(--e-4); }
.logo-light { display: var(--logo-light, block); }
.logo-dark { display: var(--logo-dark, none); }
.signature { display: block; letter-spacing: 0.08em; }
.header-tools { display: flex; flex-direction: column; gap: var(--e-4); align-items: flex-start; }
.main-nav { display: flex; flex-wrap: wrap; gap: var(--e-6); }
.main-nav a { color: var(--tinta); text-decoration: none; padding-block: var(--e-2); }
.main-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--violeta); text-decoration-thickness: 2px; }
.theme-switch { display:flex; flex-wrap:wrap; gap:var(--e-2); padding:0; margin:0; border:0; color:var(--tinta-suave); letter-spacing:normal; }
.theme-switch legend { float:left; margin-right:var(--e-2); padding-block:var(--e-2); }
.theme-switch label { display:flex; align-items:center; gap:var(--e-1); cursor:pointer; min-height:36px; }
.theme-switch input { accent-color:var(--violeta); margin:0; width:14px; height:14px; }
.hero { padding-block: var(--e-10) var(--e-20); display: grid; gap: var(--e-10); }
.eyebrow { color:var(--tinta-suave); margin-bottom:var(--e-6); }
.hero h1 { font:800 44px/46px var(--font-display); letter-spacing:-0.02em; max-width:18ch; }
.hero h1 span { color:var(--violeta); }
.text-link { display: inline-flex; align-items: center; gap:var(--e-6); margin-top:var(--e-10); color:var(--tinta); }
.text-link span { color:var(--violeta); font-size:30px; }
.hero-friends { display:flex; justify-content:center; gap:var(--e-4); align-items:flex-start; }
.friend { width:160px; text-align:center; }
.friend picture { display:block; aspect-ratio:1; border-radius:var(--r-mirilla); overflow:hidden; }
.friend-otto picture { background:var(--violeta-suave); }
.friend-rhino picture { background:var(--azul-suave); }
.friend img { display:block; width:100%; height:100%; object-fit:cover; }
.friend-rhino { margin-top:var(--e-10); }
.friend figcaption { margin-top:var(--e-4); }
.section-heading { display:flex; justify-content:space-between; gap:var(--e-4); flex-wrap:wrap; align-items:baseline; margin-bottom:var(--e-6); }
.section-heading p { color:var(--tinta-suave); }
.topic-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--tinta-suave); }
.topic-list li { display:grid; grid-template-columns:24px 1fr; gap:var(--e-2) var(--e-4); align-items:center; padding-block:var(--e-6); border-bottom:1px solid var(--tinta-suave); }
.topic-number { color:var(--eje); }
.topic-title { color:var(--tinta); font-size:22px; line-height:28px; text-decoration:none; }
a.topic-title { display:flex; justify-content:space-between; align-items:center; gap:var(--e-6); }
a.topic-title:hover { text-decoration:underline; }
a.topic-title span { color:var(--eje); }
.soon { color:var(--tinta-suave); grid-column:2; }
.guides { padding-block:var(--e-20); }
.guide-lines { display:grid; gap:var(--e-4); margin-top:var(--e-6); }
.guide-lines p { padding:var(--e-6); background:var(--violeta-suave); border-radius:var(--r-globo); }
.guide-lines p+p { background:var(--azul-suave); }
.site-footer { border-top:1px solid var(--tinta-suave); padding-block:var(--e-10); }
.site-footer > p { color:var(--violeta); }
.site-footer .theme-switch { margin-top:var(--e-6); }
.footer-meta { margin-top:var(--e-6); display:flex; flex-wrap:wrap; gap:var(--e-6); justify-content:space-between; }
.footer-meta nav { display:flex; gap:var(--e-6); align-items:center; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:var(--e-4); padding-block:var(--e-6) var(--e-10); }
.breadcrumb span:last-child { color:var(--tinta-suave); }
.article-header { max-width:880px; margin-bottom:var(--e-10); }
.article-header h1 { text-wrap:balance; }
.article-byline { margin-top:var(--e-6); display:flex; flex-wrap:wrap; gap:var(--e-4); align-items:center; }
.article-byline p { color:var(--tinta-suave); }
.chip { display:inline-block; background:var(--azul); color:var(--papel); border-radius:var(--r-mirilla); padding:var(--e-2) var(--e-4); }
.review-notice { margin-top:var(--e-6); background:var(--superficie); border-left:4px solid var(--azul); padding:var(--e-4) var(--e-6); border-radius:var(--r-chico); }
.article-grid { display:grid; gap:var(--e-10); padding-bottom:var(--e-20); }
.contents { min-width:0; }
.contents details { background:var(--superficie); border-radius:var(--r-globo); padding:var(--e-6); }
.contents summary { cursor:pointer; padding-block:var(--e-2); }
.contents ol { padding-left:var(--e-6); margin:var(--e-4) 0 0; }
.contents li { margin-block:var(--e-2); padding-left:var(--e-1); }
.contents a { color:var(--tinta); }
.article-copy { min-width:0; max-width:66ch; }
.article-copy h2 { font:700 30px/34px var(--font-display); letter-spacing:-0.01em; margin-block:var(--e-10) var(--e-6); text-wrap:pretty; }
.article-copy p { margin-block:var(--e-6); }
.article-copy ul, .article-copy ol { padding-left:var(--e-6); margin-block:var(--e-6); }
.article-copy li { padding-left:var(--e-2); margin-block:var(--e-4); }
.article-copy .citation { color:inherit; white-space:nowrap; }
.summary { padding:var(--e-6); background:var(--violeta-suave); border-radius:var(--r-globo); }
.summary h2 { margin-top:0; }
.summary p { margin-bottom:0; }
.dialogue { display:flex; align-items:center; gap:var(--e-4); padding:var(--e-6); border-radius:var(--r-globo) var(--r-globo) var(--r-globo) 6px; margin-block:var(--e-10); }
.dialogue-rhino { background:var(--azul-suave); }
.dialogue-otto { background:var(--violeta-suave); }
.dialogue picture { flex:none; width:64px; height:64px; border-radius:var(--r-mirilla); overflow:hidden; }
.dialogue img { display:block; width:100%; height:100%; }
.dialogue p { font:700 18px/26px var(--font-texto); margin:0; }
.sources { border-top:1px solid var(--tinta-suave); margin-top:var(--e-10); }
.sources ol { font-size:17px; line-height:26px; }
.sources a { overflow-wrap:anywhere; }
.sources li:target { outline:2px solid var(--foco); outline-offset:var(--e-2); border-radius:var(--r-chico); }
@media (max-width:599px) {
  .site-header { padding-block:var(--e-4); gap:var(--e-4); }
  .wordmark { width:auto; height:40px; margin-bottom:var(--e-2); }
  .main-nav { gap:var(--e-4); }
}
@media (min-width:600px) {
  .header-tools { align-items:flex-end; }
  .hero h1 { font-size:64px; line-height:62px; letter-spacing:-0.03em; }
  .topic-list li { grid-template-columns:40px 1fr auto; gap:var(--e-6); }
  .topic-title { font-size:30px; line-height:34px; }
  .topic-list li:first-child .topic-title { grid-column:2 / -1; }
  .soon { grid-column:3; }
  .guide-lines { grid-template-columns:1fr 1fr; }
  .dialogue picture { width:96px; height:96px; }
}
@media (min-width:900px) {
  .site-header { padding-block:var(--e-10); }
  .hero { grid-template-columns:1.3fr 1fr; align-items:center; padding-block:var(--e-20); }
  .hero-friends { gap:0; }
  .friend { width:240px; }
  .friend-rhino { margin-top:160px; margin-left:-24px; }
  .article-header { margin-left:280px; }
  .article-grid { grid-template-columns:240px minmax(0,1fr); }
  .contents details { position:sticky; top:var(--e-6); padding:var(--e-4); }
  .contents a { font-size:17px; line-height:26px; }
}
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
@media print {
  .header-tools, .contents, .site-footer, .skip-link { display:none; }
  .article-grid { display:block; }
  .article-header { margin-left:0; }
}
/* Pie de las páginas internas: misma escala. */
.site-footer .tipo-h2{font-family:var(--font-display);font-weight:600;font-size:clamp(32px,4vw,48px)}
/* Visible by default, including no JS or a failed enhancement. */
.motion-item { opacity:1; }
.scene-atmosphere { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.dialogue-rhino { position:relative; }
.scene-ronquido .dialogue-rhino::after { content:"Zzz"; position:absolute; top:4px; left:52px; color:var(--azul); font:600 15px/1 var(--font-texto); pointer-events:none; }
@media(prefers-reduced-motion:no-preference) {
 .motion-item.has-entered { animation:gentle-enter 400ms ease-out both; animation-delay:var(--enter-delay,0ms); }
 .dialogue.motion-item.has-entered { animation-name:balloon-enter; }
 .scene.scene-image.has-entered .scene-picture img,.scene.scene-image.has-entered .scene-atmosphere { animation:scene-zoom 12s ease-out both; }
 .scene.scene-image:not(.is-in-view) .scene-picture img,.scene.scene-image:not(.is-in-view) .scene-atmosphere { animation-play-state:paused; }
 .home-scope-hero.is-in-view .home-scope-ring { animation:emblem-float 6s ease-in-out infinite; }
 .home-topics article { transition:transform 240ms ease,box-shadow 240ms ease; }
 .home-topics article:hover,.home-topics article:focus-within { transform:translateY(-4px); box-shadow:0 14px 24px -16px var(--tinta); }
 .scene-ronquido.is-in-view .dialogue-rhino::after { animation:soft-snore 4s ease-in-out infinite; }
 /* Vestibular pages: only opacity of text may change. Never the illustration. */
 .cinema.vertigo .scene .motion-item.has-entered,.cinema.migrana .scene .motion-item.has-entered { animation:text-fade 400ms ease-out both!important; transform:none!important; }
}
@keyframes gentle-enter { from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }
@keyframes balloon-enter { from{opacity:.3;transform:scale(.96)}to{opacity:1;transform:scale(1)} }
@keyframes scene-zoom { from{transform:scale(1)}to{transform:scale(1.06)} }
@keyframes emblem-float { 0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)} }
@keyframes soft-snore { 0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.8;transform:translateY(-4px)} }
@keyframes text-fade { from{opacity:.3}to{opacity:1} }
/* Global, compiled protection, including pseudo-elements and future enhancements. */
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
 .motion-item,.scene-picture img,.scene-atmosphere,.home-scope-ring,.laser-swelling,.laser-surface { opacity:1!important; transform:none!important; }
}
html:has(#pausar-movimiento:checked) *,html:has(#pausar-movimiento:checked) *::before,html:has(#pausar-movimiento:checked) *::after { animation-play-state:paused!important; transition:none!important; }