/* KRATOS 4.0 web pages: the app's 4.0 design system (DEFINICION 12.3, DIRECCION-VISUAL).
   The build replaces the marker below with the fonts and tokens read from apps/v2/design/editorial.css,
   renamed to --k-*, so the pages can never drift from the app. Components mirror apps/personal/styles.css. */
@font-face{font-family:KratosEditorial;src:url('/apps/v2/design/fonts/serif-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:KratosUI;src:url('/apps/v2/design/fonts/sans-latin.woff2') format('woff2');font-display:swap}
:root{--k-bg:#101112;--k-panel:#191b1c;--k-panel-strong:#242725;--k-text:#f3eee4;--k-muted:#bbb8ae;--k-gold:#d8ba7d;--k-gold-soft:#e7cb8f;--k-line:#565143;--k-serif:KratosEditorial,Georgia,serif;--k-sans:KratosUI,'Noto Sans',sans-serif}
@media (prefers-color-scheme: light){:root{--k-bg:#f7f3eb;--k-panel:#fffdf8;--k-panel-strong:#ece7da;--k-text:#252824;--k-muted:#626359;--k-gold:#79571e;--k-gold-soft:#79571e;--k-line:#989281}}
/* The 3.x home around the hero is dark only: the hero keeps the dark tokens. */
.web4-hero{--k-bg:#101112;--k-panel:#191b1c;--k-panel-strong:#242725;--k-text:#f3eee4;--k-muted:#bbb8ae;--k-gold:#d8ba7d;--k-gold-soft:#e7cb8f;--k-line:#565143;--k-serif:KratosEditorial,Georgia,serif;--k-sans:KratosUI,'Noto Sans',sans-serif}
body.web4{margin:0;background:var(--k-bg);color:var(--k-text);font:17px/1.6 var(--k-sans)}
.web4 main{max-width:62ch;margin:0 auto;padding:8px 20px 48px}
@media (min-width:768px){.web4 main{padding:16px 32px 64px}}
.web4 :is(h1,h2,h3){font-family:var(--k-serif);font-weight:400;line-height:1.25;letter-spacing:normal;color:var(--k-text)}
.web4 h1{font-size:clamp(1.9rem,5vw,2.8rem);margin:16px 0 8px}
.web4 h2{font-size:1.3rem;margin:32px 0 8px}
.web4 h3{font-size:1.05rem;margin:20px 0 4px}
.web4 a{color:var(--k-gold);text-underline-offset:5px}
.web4 :is(button,input,select,a,summary):focus-visible,.web4-hero :is(button,input,select,a):focus-visible{outline:2px solid var(--k-gold);outline-offset:4px}
.web4-header{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:62ch;margin:0 auto;padding:16px 20px;border-bottom:1px solid var(--k-line)}
.web4-brand{text-decoration:none;letter-spacing:.08em;font-size:.85rem}
.web4-lead{color:var(--k-muted);font-size:1.1rem}
.web4-quiet{color:var(--k-muted);font-size:.95rem}
.web4-tool{margin:24px 0;padding:24px;background:var(--k-panel);border-top:1px solid var(--k-gold);border-radius:8px;color:var(--k-text);font-family:var(--k-sans)}
.web4-tool h2{margin-top:0}
.web4-tool form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.web4-tool label{display:flex;flex-direction:column;gap:4px;font-size:.95rem}
.web4-tool :is(input,select){min-height:44px;padding:10px;font:inherit;color:var(--k-text);background:var(--k-bg);border:1px solid var(--k-muted)}
.web4-tool button,.web4 .web4-button,.web4-hero .web4-button{display:inline-flex;align-items:center;min-height:44px;padding:12px 20px;font:inherit;color:var(--k-bg);background:var(--k-gold);border:0;border-radius:8px;text-decoration:none;cursor:pointer}
.web4-tool [data-web4-result]:focus{outline:none}
.web4-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px}
.web4-grid article{border-bottom:1px solid var(--k-muted);padding:12px 0}
.web4-grid h2,.web4-grid h3{font-size:1rem;margin:0}
.web4-grid p{margin:4px 0 0}
.web4-portrait{font-family:var(--k-serif);font-size:1.5rem;line-height:1.5}
.web4-links,.web4-sources{padding-left:20px}
.web4-links li,.web4-sources li{margin:6px 0}
.web4-signs{columns:2;padding-left:24px}
.web4-app{margin-top:32px;padding:24px;border-top:1px solid var(--k-gold);border-radius:8px;background:var(--k-panel)}
.web4-link{margin-left:12px}
.web4-footer{max-width:62ch;margin:0 auto;padding:24px 20px;border-top:1px solid var(--k-line);font-size:.95rem}
.web4-sincronario{border-left:2px solid var(--k-gold);padding-left:24px}
.web4-hero .web4-tool :is(p,li,label,h2,h3){color:var(--k-text)}
.web4-hero .web4-tool .web4-quiet{color:var(--k-muted)}
@media (max-width:420px){.web4-signs{columns:1}}
@media (prefers-reduced-motion:reduce){.web4 *{animation:none!important;transition:none!important}}