/* ============================================================
   PORTAL THE RIGHT POSITION · BASE
   Tokens del TEMA CLARO (identidad visual §6) y reglas generales.
   ============================================================ */

:root{
  /* ---------- superficies ---------- */
  --trp-fondo:      #F7F8F5;
  --trp-sup:        #FFFFFF;
  --trp-sup-2:      #F1F2EE;
  --trp-sup-3:      #E8EAE4;

  /* ---------- tinta ---------- */
  --trp-tinta:      #141617;   /* 19.8:1 sobre blanco */
  --trp-tinta-2:    #5B6068;   /*  6.3:1 */
  --trp-tinta-3:    #8A8F99;   /*  solo rótulos e iconos */

  /* ---------- marca ---------- */
  --trp-oro:       #D8C05F;
  --trp-oro-tinta: #8A6A17;
  --trp-oro-tinte: #FAF5E4;
  --trp-oro-borde: rgba(190,161,93,.5);

  /* ---------- bordes y sombras ---------- */
  --trp-borde:      rgba(10,10,12,.10);
  --trp-borde-2:    rgba(10,10,12,.18);
  --trp-sombra:     0 1px 2px rgba(10,10,12,.05), 0 14px 34px -20px rgba(10,10,12,.22);
  --trp-sombra-alta:0 1px 2px rgba(10,10,12,.06), 0 24px 48px -24px rgba(10,10,12,.30);

  /* ---------- semánticos ---------- */
  --trp-ok:     #2E7D4F;
  --trp-alerta: #A15F00;
  --trp-error:  #B3261E;
  --trp-info:   #1F6FB2;
  --trp-ok-tinte:     #E7F4EC;
  --trp-alerta-tinte: #FDF3E2;
  --trp-error-tinte:  #FCEBEA;
  --trp-info-tinte:   #E9F2FA;

  /* ---------- lo que no cambia ---------- */
  --trp-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --trp-texto:  'Inter','Segoe UI',system-ui,sans-serif;
  --trp-max:1240px;
  --trp-r:18px;
  --trp-r-g:28px;
  --trp-ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  overflow-x:hidden;           /* iOS no respeta overflow-x en body */
  -webkit-text-size-adjust:100%;
}
@supports (overflow:clip){
  html{ overflow-x:clip; }     /* no crea contenedor de scroll: no rompe el encabezado fijo */
}

body{
  margin:0;
  min-height:100vh;
  background:var(--trp-fondo);
  color:var(--trp-tinta);
  font-family:var(--trp-texto);
  font-size:15px;              /* escala densa del panel (§11) */
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Rejilla de puntitos del fondo (en claro: casi negro al 5 %) */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(10,10,12,.05) 1px, transparent 1px);
  background-size:22px 22px;
}

h1,h2,h3{
  margin:0;
  font-family:var(--trp-display);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
}
p{ margin:0; }
img{ max-width:100%; height:auto; }
a{ color:var(--trp-oro-tinta); }
button,input{ font:inherit; color:inherit; }
code{ font-family:'Consolas','Courier New',monospace; font-size:.92em; background:var(--trp-sup-2); padding:2px 6px; border-radius:6px; }

/* El panel SÍ se teclea: el foco tiene que verse (§6) */
:focus-visible{
  outline:2px solid var(--trp-oro-tinta);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- tipografía ---------- */
.etiqueta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--trp-display);
  font-weight:500;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--trp-tinta-2);
}
.parrafo{ font-size:15px; color:var(--trp-tinta-2); max-width:62ch; }

/* ---------- el cuadrito: la firma de la marca ---------- */
.cuadro{
  display:inline-block;
  width:9px; height:9px;
  background:var(--trp-oro);
  flex:none;
  transform:translateY(-1px);
  transition:transform .22s var(--trp-ease);
}
.cuadro--vivo{ animation:pulso 2.4s var(--trp-ease) infinite; }
@keyframes pulso{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.72); }
}

/* ---------- contenedor ---------- */
.contenedor{
  width:min(calc(100% - 48px), var(--trp-max));
  margin-inline:auto;
}

/* ---------- accesibilidad ---------- */
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}