/* Mundo Otaku case page · base structure (reading column, bar, figures). */
:root{
  --papel:#fff;--tinta:#111;--tinta-2:#444;--acento:#000;--linea:#ccc;--superficie:#f2f2f2;
  --f-titulo:system-ui,sans-serif;--f-texto:system-ui,sans-serif;--f-etiqueta:ui-monospace,monospace;
  --ancho:min(1180px,calc(100% - 48px));
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:auto}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.6 var(--f-texto);-webkit-text-size-adjust:100%}
img,video{max-width:100%}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
h1,h2,h3{font-family:var(--f-titulo);line-height:1.08;margin:0}
h1 em,h2 em,h3 em{font-style:normal}
p,figure,dl,dd,ol,ul{margin:0}
.wrap{width:var(--ancho);margin-inline:auto}
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 18px;background:var(--tinta);color:var(--papel)}
.skip:focus{top:12px}
.eyebrow{font:500 12px/1.6 var(--f-etiqueta);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.section-lead{font-size:1.15em}
.wip-note,.source-tag,.evidence-limits,.diagram-caption,.path-note{font-size:14px;line-height:1.6;color:var(--tinta-2)}
.button{display:inline-flex;align-items:center;gap:16px;min-height:48px;padding:12px 22px;text-decoration:none;font-weight:600;border:2px solid var(--tinta);color:var(--tinta)}
.button.primary{background:var(--acento);border-color:var(--acento);color:var(--papel)}
.cb-bar{display:flex;align-items:center;gap:16px}
.cb-firma,.cb-donde{white-space:nowrap}
.cb-fin{margin-left:auto;display:flex;align-items:center;gap:12px}
#lang{font:600 12px/1 var(--f-etiqueta);min-height:40px;padding:0 14px;cursor:pointer;background:none;border:2px solid currentColor;color:inherit}
.project-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:32px}
.project-facts .eyebrow{margin-bottom:6px}
#producto{padding-block:72px}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px}
.intro-grid h2{font-size:clamp(30px,4vw,52px);margin-bottom:24px}
.intro-grid p+p{margin-top:16px}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px}
.product-grid article{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:2px solid var(--tinta)}
.product-grid h3{font-size:26px}
.chapter-number{font:600 13px/1 var(--f-etiqueta);color:var(--tinta-2)}
.product-grid a{display:inline-flex;gap:6px;min-height:44px;align-items:center;font-weight:600}
.overview{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start;padding-block:72px}
.overview h2{font-size:clamp(30px,4vw,52px);margin-bottom:20px}
.overview h3{font-size:22px;margin:28px 0 10px}
.reading-route{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;margin:24px 0 16px;counter-reset:ruta}
.reading-route a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.editorial-video{margin:0}
.editorial-video .media-rendered{padding:0}
.editorial-video video{display:block;width:100%;height:auto;aspect-ratio:720/1560;background:#000}
.editorial-video figcaption{display:flex;flex-direction:column;gap:6px;padding-top:12px}
.editorial-video figcaption small{font:500 12px/1 var(--f-etiqueta);color:var(--tinta-2)}
.editorial-video figcaption span{font-size:14px;color:var(--tinta-2)}
.video-description{margin-top:8px;font-size:14px}
.video-description summary,.technical-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.paired-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;padding-block:72px}
.paired-chapters h2{font-size:clamp(28px,3.4vw,46px);margin:8px 0 18px}
.model-map ol{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:10px}
.model-map li{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid var(--linea);font-weight:600}
.model-map li span{font-weight:400;font-size:14px;color:var(--tinta-2)}
.decision-list{display:flex;flex-direction:column;gap:0;margin-top:24px}
.decision-list>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--linea)}
.decision-list dt{font-weight:700}
.decision-list dd{color:var(--tinta-2)}
.engineering-section{padding-block:72px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;margin-bottom:32px}
.section-heading h2{font-size:clamp(30px,4vw,52px);margin-top:8px}
.section-heading>p{max-width:420px;color:var(--tinta-2)}
.architecture-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:20px 0 32px;padding:18px 0;border-block:1px solid var(--linea)}
.architecture-strip div{display:flex;flex-direction:column;gap:4px}
.architecture-strip span{font:600 11px/1.4 var(--f-etiqueta);letter-spacing:.08em;color:var(--tinta-2)}
.path-controls{border:0;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px 24px}
.path-controls legend{font-weight:600;margin-bottom:8px}
.path-controls label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.path-panel{padding:24px;border:2px solid var(--tinta);background:var(--superficie)}
.path-panel h3{font-size:24px;margin:8px 0 12px}
.path-panel ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.technical-details{margin-top:32px;border-top:1px solid var(--linea)}
.technical-details details{border-bottom:1px solid var(--linea);padding:6px 0}
.technical-details details p{padding:4px 0 16px;color:var(--tinta-2)}
.stack-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px}
.stack-groups h3{font-size:20px;margin-bottom:12px}
.stack-groups ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.stack-groups li{font:600 11px/1 var(--f-etiqueta);padding:7px 9px;border:1px solid var(--tinta)}
.evidence-section{padding-block:72px}
.quality-table-wrap{overflow-x:auto}
.quality-table{width:100%;border-collapse:collapse;text-align:left}
.quality-table th,.quality-table td{padding:14px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.quality-table thead th{font:600 12px/1.4 var(--f-etiqueta);text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2)}
.quality-table td:nth-child(2){font-weight:700;white-space:nowrap}
.scope-notes{margin-top:40px;max-width:760px}
.scope-notes h3{font-size:24px;margin-bottom:10px}
.closing-note{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;margin-top:56px;padding-top:32px;border-top:2px solid var(--tinta)}
.closing-note p{max-width:720px;font-size:1.1em}
/* Closing contact (audit 2026-10-12): mail, LinkedIn and the way back, stacked beside the closing note */
.cierre-acciones{display:flex;flex-direction:column;gap:10px}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:40px;border-top:1px solid var(--linea)}
.footer p span{display:block;font-size:14px;color:var(--tinta-2)}
.footer a{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:760px){
  body{font-size:16px}
  .project-facts,.product-grid,.stack-groups,.paired-chapters{grid-template-columns:minmax(0,1fr)}
  .project-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro-grid,.overview{grid-template-columns:minmax(0,1fr)}
  .section-heading{flex-direction:column;gap:12px}
  .decision-list>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .quality-table th,.quality-table td{padding:10px 6px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.cb-bar{display:none}}