/* ============================ Reset y base ============================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--texto);
  color:var(--text);
  background:var(--bg);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:.005em;
  transition:background .2s ease, color .2s ease;
}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--primary-text);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration:underline}
table{border-collapse:collapse;width:100%}
summary{cursor:pointer}
summary::-webkit-details-marker{display:none}

/* ============================ Entrada de marca ============================ */
.marca-arranque{
  position:fixed;inset:0;z-index:2000;display:none;place-items:center;
  padding:28px;background:#fff;pointer-events:none;overflow:hidden;
}
.intro-pendiente .marca-arranque{
  display:grid;will-change:clip-path;
  animation:marca-arranque-salida .44s cubic-bezier(.7,0,.84,0) .94s both;
}
.marca-arranque-contenido{width:min(76vw,360px);display:grid;justify-items:center}
.marca-arranque-recorte{width:100%;overflow:hidden}
.marca-arranque-logo{width:100%;height:auto;display:block}
.intro-pendiente .marca-arranque-logo{
  will-change:clip-path,transform;
  animation:marca-logo-revela .64s cubic-bezier(.16,1,.3,1) .08s both;
}
.marca-arranque-modulo{
  margin-top:13px;color:#3D6F49;font-family:var(--display);font-size:13px;
  font-weight:700;letter-spacing:2.8px;text-transform:uppercase;
}
.intro-pendiente .marca-arranque-modulo{animation:marca-modulo-revela .3s ease-out .46s both}
.marca-arranque-trazo{position:relative;width:88px;height:2px;margin-top:16px;background:#E6EAE4;overflow:hidden}
.marca-arranque-trazo::before{content:"";position:absolute;inset:0;background:#E8C546;transform-origin:left}
.intro-pendiente .marca-arranque-trazo::before{animation:marca-trazo-revela .48s cubic-bezier(.16,1,.3,1) .34s both}

@keyframes marca-logo-revela{
  from{clip-path:inset(0 100% 0 0);transform:translateX(-12px)}
  to{clip-path:inset(0);transform:none}
}
@keyframes marca-modulo-revela{from{opacity:0}to{opacity:1}}
@keyframes marca-trazo-revela{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes marca-arranque-salida{
  from{clip-path:inset(0)}
  to{clip-path:inset(0 0 0 100%)}
}

/* Superficies del navegador tematizadas */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}
::placeholder{color:var(--text-3);opacity:1}
*{scrollbar-color:var(--border-strong) transparent;scrollbar-width:thin}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:3px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

/* ============================ Tipografía ============================ */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;color:var(--text);letter-spacing:-.01em;text-wrap:balance}
h1{font-size:34px}
h2{font-size:23px}
h3{font-size:16px;text-transform:uppercase;letter-spacing:.9px;color:var(--text-2)}
h4{font-size:13px;text-transform:uppercase;letter-spacing:.9px;color:var(--text-2)}
p{max-width:70ch}

/* ============================ Utilidades ============================ */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.text-muted{color:var(--text-2)}
.text-right{text-align:right}
.text-center{text-align:center}
.nowrap{white-space:nowrap}
.upper{text-transform:uppercase;letter-spacing:.7px}
.hidden{display:none !important}
.flex{display:flex}
.col{display:flex;flex-direction:column}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.gap-xs{gap:6px}.gap-sm{gap:10px}.gap-md{gap:16px}.gap-lg{gap:24px}
.mt-sm{margin-top:10px}.mt-md{margin-top:18px}.mt-lg{margin-top:28px}
.mb-sm{margin-bottom:10px}.mb-md{margin-bottom:18px}.mb-lg{margin-bottom:28px}
.w-full{width:100%}
.flex-1{flex:1;min-width:0}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(max-width:960px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
/* Rejillas contenido + barra lateral con anchura fija: colapsan en pantallas medianas */
@media(max-width:1040px){
  .pagina [style*="1fr 3"],.pagina [style*="3fr 1"],.pagina [style*="320px 1fr"],.pagina [style*="340px 1fr"],.pagina [style*="1fr 320"],.pagina [style*="1fr 340"]{grid-template-columns:1fr !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .intro-pendiente .marca-arranque{display:none}
}

@media(max-width:680px){h1{font-size:30px}}