/* =============================================================
   MSB · sistema compartido de las páginas de carrera
   «CASA DE PIGMENTO»

   Lo usan modas.html, grafico.html e interiores.html. La portada
   (index.html) lleva su copia embebida porque además carga el motor
   de frames del hero; si se toca el sistema, hay que tocar los dos.

   Cada página fija su pigmento con --tono / --tono-t antes de nada:
     Modas      rosa mexicano
     Gráfico    añil
     Interiores nopal
   ============================================================= */

:root{
  color-scheme: dark;

  --noche:#0F0B08; --noche-2:#17110C; --noche-3:#221A13;
  --cal:#F4EFE4;  --cal-2:#E9E1D1;

  --rosa:#FF2D8E; --anil:#3B7BF0; --nopal:#00B074;
  --maiz:#FFC233; --grana:#F04E48;
  --rosa-t:#BE0060; --anil-t:#1B4FB5; --nopal-t:#00714A;

  --hueso:rgba(244,239,228,.62);
  --hueso-2:rgba(244,239,228,.38);
  --hilo:rgba(244,239,228,.14);
  --hilo-cal:rgba(15,11,8,.14);

  --col:1320px;
  --e:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,4vw,56px);

  --tono:var(--rosa); --tono-t:var(--rosa-t);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{
  margin:0;background:var(--noche);color:var(--cal);
  font-family:Archivo,"Segoe UI",system-ui,sans-serif;
  font-size:17px;line-height:1.62;font-weight:350;
  overflow-x:clip;-webkit-font-smoothing:antialiased;font-synthesis-weight:none;
}
h1,h2,h3,h4{margin:0;font-family:Syne,Archivo,sans-serif;font-weight:800;
  letter-spacing:-.035em;line-height:.94;text-wrap:balance}
p{margin:0}
/* height:auto es obligatorio: los atributos width/height del HTML entran como
   estilo de presentación y, sin esto, le ganan a aspect-ratio. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.grano{
  position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.042;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.col{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
.eti{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  font-variation-settings:"wdth" 88;color:var(--hueso-2)}
.cursiva{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  letter-spacing:-.01em}

/* ---------- revelado ---------- */
.js .rv{opacity:0;transform:translateY(26px)}
.js .rv.on{opacity:1;transform:none;transition:opacity .85s var(--e),transform .85s var(--e)}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}
.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;border-bottom:1px solid transparent;
  transition:background .4s var(--e),backdrop-filter .4s var(--e),border-color .4s var(--e)}
.nav.pegado{background:rgba(15,11,8,.86);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--hilo)}
.nav-in{display:flex;align-items:center;gap:32px;max-width:var(--col);margin:0 auto;
  padding:18px var(--pad)}
.nav img{height:38px;width:auto}
.nav-m{display:flex;gap:30px;margin-left:auto;align-items:center}
.nav-m a{font-size:13.5px;font-weight:500;color:var(--hueso);position:relative;padding:4px 0;
  transition:color .25s}
.nav-m a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--tono);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--e)}
.nav-m a:hover{color:var(--cal)}
.nav-m a:hover::after{transform:scaleX(1)}
/* .nav-m a (0,1,1) le gana a .btn (0,1,0) y le roba el color al botón:
   el texto se queda en el gris del menú sobre el pigmento. Se iguala. */
.nav-m a.btn{color:#fff;border-bottom:0}
.nav-m a.btn:hover{color:#fff}
.nav-m a[aria-current="page"]{color:var(--cal)}
.nav-m a[aria-current="page"]::after{transform:scaleX(1)}

.btn{display:inline-flex;align-items:center;gap:11px;background:var(--tono);color:#fff;
  font-weight:600;font-size:14px;padding:13px 26px;border-radius:100px;white-space:nowrap;
  transition:transform .3s var(--e),box-shadow .3s var(--e);border:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(0,0,0,.4)}
.btn svg{transition:transform .3s var(--e)}
.btn:hover svg{transform:translateX(4px)}
.btn-linea{background:transparent;color:var(--cal);border:1px solid var(--hilo)}
.btn-linea:hover{background:rgba(244,239,228,.07);box-shadow:none;border-color:var(--hueso-2)}

/* ---------- registros ---------- */
.reg{padding:clamp(80px,10vw,150px) 0;position:relative;z-index:5;background:var(--noche)}
.reg-cal{background:var(--cal);color:var(--noche)}
.reg-cal .eti{color:rgba(15,11,8,.44)}
.cab{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:start;
  margin-bottom:clamp(44px,5.5vw,80px)}
.cab h2{font-size:clamp(32px,5.2vw,68px)}
.cab .bajada{max-width:46ch;font-size:clamp(15.5px,1.35vw,18px);color:var(--hueso);
  margin-top:auto;padding-bottom:6px}
.reg-cal .cab .bajada{color:rgba(15,11,8,.66)}
.rom{font-family:Syne,sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;
  color:var(--tono);padding-top:12px;display:block}
.reg-cal .rom{color:var(--tono-t)}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--hilo);padding:44px 0 40px;margin-top:clamp(60px,8vw,110px)}
.pie-in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
.pie img{height:40px;width:auto;opacity:.85}
.pie small{font-size:12.5px;color:var(--hueso-2)}
.pie nav{display:flex;gap:22px;flex-wrap:wrap}
.pie nav a{font-size:13.5px;color:var(--hueso);transition:color .25s}
.pie nav a:hover{color:var(--tono)}

/* ---------- utilidades ---------- */
.saltar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.saltar:focus{width:auto;height:auto;clip-path:none;left:16px;top:16px;z-index:99;
  background:var(--tono);color:#fff;padding:13px 20px;border-radius:6px}
:focus-visible{outline:2px solid var(--maiz);outline-offset:4px}
::selection{background:var(--tono);color:#fff}

@media (max-width:900px){
  .nav-m a:not(.btn){display:none}
  .cab{grid-template-columns:1fr;gap:20px}
  .cab .bajada{padding-bottom:0}
}