/* =============================================================
   UCM AI — page.css
   Chasis compartido por 404, gracias y privacidad. Misma retícula
   editorial, mismo sistema tipográfico, misma tinta.
   ============================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink-0);color:var(--paper);
  font-family:var(--font-body);font-size:var(--t-base);
  line-height:var(--lh-relaxed);letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100svh;display:flex;flex-direction:column;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:where(h1,h2,h3){font-weight:var(--w-black);line-height:var(--lh-snug);text-wrap:balance}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)}
:focus:not(:focus-visible){outline:none}

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:190px 190px;
}

.wrap{
  width:min(100% - var(--gutter) * 2, var(--grid-max));
  margin-inline:auto;padding-inline:clamp(0.875rem, 2.4vw, 2rem);
  position:relative;z-index:2;
}

.masthead{padding-block:var(--s-4);background:var(--ink-1);position:relative;z-index:2}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.masthead img{width:104px}
.masthead a.back{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-sm);color:var(--paper-2);
  transition:color var(--d-hover) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.masthead a.back:hover{color:var(--accent)}}

.crumbs{padding-block:var(--s-4) 0;position:relative;z-index:2}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--t-xs);color:var(--paper-3)}
.crumbs li{display:flex;align-items:center;gap:var(--s-2)}
.crumbs li + li::before{content:"/";color:var(--paper-4)}
.crumbs a{transition:color var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--accent)}}
.crumbs [aria-current]{color:var(--paper-2)}

.page{flex:1;padding-block:clamp(var(--s-6), 7vw, var(--s-9));position:relative;z-index:2}
.page__grid{display:grid;grid-template-columns:1fr 2fr;gap:var(--grid-gap);align-items:start}
@media (max-width:900px){.page__grid{grid-template-columns:1fr;gap:var(--s-5)}}

.page__rule{height:3px;width:64px;border-radius:2px;background:var(--prisma);margin-bottom:var(--s-4)}
.page__title{font-size:var(--t-2xl);letter-spacing:var(--tr-display);line-height:var(--lh-tight);max-width:13ch}
.page__code{
  font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--paper-3);margin-bottom:var(--s-2);
}

.prose{max-width:var(--measure)}
.prose p,.prose li{color:var(--paper-2);line-height:var(--lh-relaxed)}
.prose > * + *{margin-top:var(--s-4)}
.prose h2{
  font-size:var(--t-lg);letter-spacing:var(--tr-title);color:var(--paper);
  margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--rule);
}
.prose h2 + *{margin-top:var(--s-3)}
.prose ul{display:grid;gap:var(--s-2)}
.prose ul li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3)}
.prose ul li::before{content:"";width:16px;height:1px;background:var(--accent);margin-top:0.72em}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent-line);transition:border-color var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.prose a:hover{border-bottom-color:var(--accent)}}
.prose strong{color:var(--paper);font-weight:var(--w-semi)}

.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-sm);font-weight:var(--w-semi);
  padding:0.7rem var(--s-4);border-radius:var(--r-sm);
  border:1px solid transparent;
  transition:transform var(--d-press) var(--ease-out),
             background-color var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out),
             color var(--d-hover) var(--ease-out);
}
.btn:active{transform:scale(0.97)}
.btn--solid{background:var(--accent);color:var(--accent-ink)}
.btn--ghost{border-color:var(--rule-2);color:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .btn--solid:hover{background:#FFA463}
  .btn--ghost:hover{border-color:var(--accent-line);color:var(--accent)}
}
.ico{width:1.125em;height:1.125em;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.foot{
  background:var(--ink-1);padding-block:var(--s-4);
  font-size:var(--t-xs);color:var(--paper-3);
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);justify-content:space-between;
  position:relative;z-index:2;
}
.foot a{transition:color var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--accent)}}

/* ── Tacto en pantalla pequeña: 44px de objetivo sin mover el diseño ── */
.crumbs a,.foot a{position:relative;display:inline-block}
.crumbs a::after,.foot a::after{content:"";position:absolute;inset:-12px 0}
.masthead a.back{padding-block:var(--s-2)}
.masthead img{padding-block:var(--s-1)}
.sitemap a{min-height:56px;align-content:center}
@media (max-width:620px){
  .actions .btn{flex:1 1 auto;justify-content:center}
}