/* Guías del Lab: lectura cómoda, mismo sistema que el resto (paper + ink, un solo naranja) */
:root{
  --bg:#FFFFFF; --ink:#0F0F0F; --muted:#5A5A5A; --line:#E4E2DE; --accent:#FF4A1C; --accent-ink:#B8300C;
  --ground-cool:#E4E7EA; --ground-warm:#F1EEE9;
  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--display)}
main{overflow-x:clip}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1360px;margin:0 auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px))}
.mono{font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:-.005em}
.muted{color:var(--muted)}
.k{margin:0;color:var(--accent-ink)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
.top .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding-block:20px}
.brand{font-size:19px;font-weight:600;text-decoration:none;letter-spacing:-.01em}
.nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.nav a{text-decoration:none}
.nav a:hover{color:var(--accent)}

.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;font:600 16px var(--display);text-decoration:none;border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}

/* Cabecera de la guía */
.g-head .wrap{padding-block:clamp(40px,6vw,88px) clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:18px}
.crumbs{display:flex;gap:10px;color:var(--muted)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--accent-ink)}
.g-head h1{margin:0;font-size:clamp(44px,6.4vw,100px);line-height:.92;font-weight:800;letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
.g-head h1 em{font-style:normal;color:var(--accent)}
.lead{margin:0;max-width:52ch;font-size:clamp(19px,1.7vw,23px);line-height:1.5;font-weight:300}
.by{padding-top:14px;border-top:1px solid var(--line);max-width:52ch}

/* Cuerpo: imagen fija a la izquierda y texto para leer */
.g-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);padding-bottom:clamp(64px,8vw,112px);align-items:start}
.g-fig{margin:0;position:sticky;top:100px;background:var(--ground-cool);aspect-ratio:4/5;overflow:hidden}
.g-fig img{width:100%;height:100%;object-fit:cover;display:block}
.g-body{max-width:66ch;font-size:18px;line-height:1.65}
.g-body h2{margin:44px 0 12px;font-size:clamp(26px,2.6vw,34px);line-height:1.1;font-weight:800;letter-spacing:-.02em}
.g-body h2:first-of-type{margin-top:0}
.g-body p{margin:0 0 16px}
.g-body ul{margin:0 0 16px;padding-left:20px}
.g-body li{margin-bottom:8px}
.g-body a{color:var(--accent-ink);text-underline-offset:3px}
.steps{list-style:none;margin:0 0 18px;padding:0;counter-reset:s;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding-block:14px;border-bottom:1px solid var(--line);margin:0}
.steps li::before{content:counter(s,decimal-leading-zero);color:var(--accent-ink);font-weight:600;font-size:15px;padding-top:3px}
.tbl{overflow-x:auto;margin:6px 0 18px}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted)}
.mats{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.mats li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--ground-warm);margin:0}
.mats strong{font-size:19px;letter-spacing:-.01em}
.mats span{color:var(--muted);font-size:16px}
.g-cta{margin-top:40px;padding:26px;background:#FFF1EC;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.g-cta strong{font-size:24px;letter-spacing:-.015em}
.g-cta span{color:var(--muted)}

/* Más guías */
.more{border-top:1px solid var(--ink)}
.more .wrap{padding-block:clamp(48px,6vw,88px);display:flex;flex-direction:column;gap:24px}
.more h2{margin:0;font-size:clamp(30px,3.4vw,46px);font-weight:800;letter-spacing:-.03em}
.rels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.rel{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--line);text-decoration:none;min-height:160px;position:relative;transition:border-color .25s}
.rel strong{font-size:22px;line-height:1.15;letter-spacing:-.015em}
.rel .go{margin-top:auto;font-size:22px;color:var(--accent)}
.rel:hover{border-color:var(--accent)}

.foot{border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;padding-block:32px;color:var(--muted);font-size:15px}
.foot a{text-decoration:none}.foot a:hover{color:var(--accent-ink)}

@media (max-width:860px){
  .g-grid{grid-template-columns:1fr}
  .g-fig{position:static;aspect-ratio:5/4}
}
html.mesh .mats li,html.mesh .g-cta,html.mesh .g-fig{background:transparent !important;outline:1px solid var(--wire)}