/* ============================================================
   CARNE LATENTE — BASE
   Tokens, reset sobre Bootstrap, botones, barra fija y menú móvil.
   Bootstrap sólo aporta grid y utilidades; la identidad vive aquí.
   ============================================================ */

:root{
  --bg:#0B0708; --bg-2:#140C0E;
  --text:#F5F0EC; --secondary:#C7BCBE; --muted:#8B7D80;
  --accent:#8C1F35; --accent2:#B23349;
  --line:rgba(245,240,236,.12);
  --serif:Fraunces,Georgia,serif;
  --sans:Jost,"Helvetica Neue",Arial,sans-serif;
  --maxw:1240px;
  --pad:28px;
  --bar-h:64px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;margin:0}
section[id],footer[id]{scroll-margin-top:var(--bar-h)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
/* Contenedor del header: mismo gutter que el resto del sitio. */
.container-xxl{--bs-gutter-x:calc(var(--pad) * 2)}

/* Numeración y metadatos */
.num{font-family:var(--sans);font-weight:400;letter-spacing:.16em;color:var(--muted);font-size:.72rem}
.kicker{text-transform:uppercase;letter-spacing:.28em;font-size:.66rem;color:var(--secondary)}

/* Botones (cl-btn para no chocar con .btn de Bootstrap) */
.cl-btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.8rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--line);
  color:var(--text);background:transparent;cursor:pointer;
  transition:border-color .5s ease,color .5s ease,background .5s ease,filter .5s ease;
}
.cl-btn:hover{border-color:var(--accent2);color:#fff}
.cl-btn--solid{border-color:var(--accent);background:linear-gradient(120deg,var(--accent),var(--accent2))}
.cl-btn--solid:hover{filter:brightness(1.12);border-color:transparent}
.arrow{display:inline-block;transition:transform .4s ease}
.cl-btn:hover .arrow{transform:translateX(4px)}

/* Hamburguesa */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-right:-8px}
.burger span{width:24px;height:2px;background:var(--text);transition:transform .35s ease,opacity .3s ease}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Barra fija, siempre visible.
   Sobre el hero es transparente y ocupa el lugar del antiguo header;
   al hacer scroll (o en páginas sin hero) se vuelve compacta y sólida. */
.site-bar{
  position:fixed;top:0;left:0;right:0;z-index:100;height:104px;
  padding:0;
  background:rgba(11,7,8,0);border-bottom:1px solid transparent;
  transition:height .45s ease,padding .45s ease,background .45s ease,border-color .45s ease;
}
.site-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;height:100%}
.site-bar.is-solid{
  height:var(--bar-h);
  background:rgba(11,7,8,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.brand{font:400 20px var(--serif);line-height:1.2;white-space:nowrap}
.brand small{display:block;font:300 10px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.bar-links{display:flex;gap:28px}
.bar-links a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--secondary);transition:color .3s ease}
.bar-links a:hover,.bar-links a[aria-current]{color:var(--text)}
.bar-links a[aria-current]{box-shadow:inset 0 -1px 0 var(--accent2)}

/* Menú móvil a pantalla completa */
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--bg);
  padding:calc(var(--bar-h) + 24px) var(--pad) 40px;
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;
  transform:translateY(-100%);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .4s ease,visibility 0s .5s;
}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.mobile-menu a{font:400 2rem var(--serif);padding:12px 0;border-bottom:1px solid var(--line)}
.mobile-menu a:active,.mobile-menu a[aria-current]{color:var(--accent2)}

@media(max-width:1100px){
  .bar-links{display:none}
  .burger{display:flex}
}
@media(max-width:900px){.site-bar{height:88px}}
@media(max-width:700px){:root{--pad:22px}}
@media(max-width:600px){
  .site-bar{height:64px}
  .brand{font-size:17px}.brand small{font-size:8px}
}
@media(max-width:520px){:root{--pad:18px}}
@media(prefers-reduced-motion:reduce){
  .site-bar,.mobile-menu{transition:none}
}

/* Footer — wordmark */
.site-foot{position:relative;overflow:hidden;background:var(--bg);border-top:1px solid var(--line);padding-top:clamp(64px,9vw,120px)}
.site-foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 110%,rgba(140,31,53,.22),transparent 70%);
}
.foot-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(32px,4vw,64px)}
.foot-brand{font:400 1.5rem/1.1 var(--serif);text-transform:uppercase;letter-spacing:.02em;margin:0}
.foot-brand small{display:block;font:300 .62rem var(--sans);letter-spacing:.2em;color:var(--muted);margin-top:6px}
.foot-lead{color:var(--secondary);max-width:30ch;margin:18px 0 0;font-size:.95rem;line-height:1.6}
.foot-h{font:400 .66rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-list a{color:var(--secondary);font-size:.95rem;transition:color .35s ease}
.foot-list a:hover,.foot-list a[aria-current]{color:var(--text)}
.foot-list a[aria-current]{position:relative}
.foot-list a[aria-current]::before{
  content:"";position:absolute;left:-12px;top:50%;
  width:5px;height:5px;border-radius:50%;background:var(--accent2);transform:translateY(-50%);
}
.foot-list--salas span{display:inline-block;width:2.2em;font-size:.7rem;letter-spacing:.12em;color:var(--muted)}
.foot-social{display:flex;gap:18px}
.foot-social a{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:50%;color:var(--secondary);
  transition:color .35s ease,border-color .35s ease,transform .35s ease;
}
.foot-social a:hover{color:var(--accent2);border-color:var(--accent2);transform:translateY(-2px)}
.foot-mail{display:block;color:var(--secondary);font-size:.95rem;margin-bottom:14px;transition:color .35s ease}
.foot-mail:hover{color:var(--text)}
.foot-cta{font:300 clamp(1.6rem,2.4vw,2.2rem)/1.1 var(--serif);color:var(--text)}
.foot-cta:hover{color:var(--accent2)}
.foot-cta:hover .arrow{transform:translateX(6px)}
.foot-bar{
  position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;
  margin-top:clamp(56px,7vw,96px);padding:22px 0;border-top:1px solid var(--line);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.foot-top:hover{color:var(--text)}
.foot-mark{
  position:relative;display:block;
  font-family:var(--serif);font-weight:300;text-transform:uppercase;
  white-space:nowrap;text-align:center;
  font-size:calc((100vw - 2px) / 8);
  line-height:.78;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(178,51,73,.6);
  margin:clamp(8px,2vw,24px) 0 -.14em;user-select:none;
  transition:color 1.2s ease,-webkit-text-stroke-color 1.2s ease;
}
.foot-credits{
  position:relative;z-index:1;background:#070405;border-top:1px solid var(--line);
  padding:16px 0;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:center;
}
.foot-credits a{color:var(--secondary);transition:color .35s ease}
.foot-credits a:hover{color:var(--accent2)}
@media(hover:hover){
  .site-foot:hover .foot-mark{color:rgba(140,31,53,.14);-webkit-text-stroke-color:rgba(178,51,73,.9)}
}
@media(max-width:1023px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-intro{grid-column:1/-1}
}
@media(max-width:575px){
  .foot-grid{grid-template-columns:1fr}
  .foot-list--salas{grid-template-columns:1fr 1fr}
  .foot-bar{flex-direction:column}
  .foot-mark{font-size:calc((100vw - 2px) / 8.5)}
}
@media(prefers-reduced-motion:reduce){
  .foot-list a,.foot-mail,.foot-social a,.foot-mark,.foot-top,.foot-cta .arrow,.foot-credits a{transition:none}
}

/* Loader */
.cl-loader{
  position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:grid;place-items:center;clip-path:inset(0 0 0 0);
  transition:clip-path .9s cubic-bezier(.77,0,.18,1),visibility 0s .9s;
  animation:cl-loader-failsafe 0s 9s forwards;
}
.cl-loader::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(50% 40% at 50% 55%,rgba(140,31,53,.18),transparent 70%);
}
.cl-loader.is-done{clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none}
.cl-loader-inner{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;
  transition:opacity .4s ease,transform .6s ease;
}
.cl-loader.is-done .cl-loader-inner{opacity:0;transform:translateY(-18px)}
.cl-loader-mark{
  font:300 clamp(1.6rem,4vw,2.6rem)/1 var(--serif);text-transform:uppercase;letter-spacing:.08em;
  color:transparent;-webkit-text-stroke:1px rgba(245,240,236,.75);
}
.cl-loader-bar{position:relative;width:min(220px,50vw);height:1px;background:rgba(245,240,236,.15);overflow:hidden}
.cl-loader-fill{
  position:absolute;inset:0;background:var(--accent2);
  transform:scaleX(var(--cl-p,0));transform-origin:0 50%;transition:transform .35s ease;
}
.cl-loader-pct{font:300 .7rem var(--sans);letter-spacing:.24em;color:var(--muted);font-variant-numeric:tabular-nums}
html.cl-loading{overflow:hidden}
html.cl-loading body{overflow:hidden}
@keyframes cl-loader-failsafe{to{visibility:hidden;opacity:0;pointer-events:none}}
@media(prefers-reduced-motion:reduce){
  .cl-loader{transition:opacity .3s ease,visibility 0s .3s}
  .cl-loader.is-done{clip-path:none;opacity:0}
}