/* ============================================================
   arquisma-marca.css · Libro de marca v2 "grafito y menta (sep 2026)
   REDISEÑO real de la web pública — no solo recoloreado:
   · nav duotono con sello (coin) + wordmark contemporáneo
   · pestañas con marca (teal), desplegables en papel
   · botones sistema K4 (neumórficos en papel · píldora degradada en oscuro)
   Cargar DESPUÉS de asesia-tokens.css y arquisma-site.css (gana la cascada).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Albert+Sans:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --acc: #232628;  --acc-dim: #16181A;  --acc-hi: #1F7F68;
  --acc-soft: rgba(27,66,81,.10);  --acc-border: rgba(27,75,81,.32);  --acc-glow: rgba(27,75,81,.30);
  --teja: #87937B;  --teja-soft: rgba(135,147,123,.16);
  --teal: #7FD1B9;  --teal-soft: rgba(131,183,173,.18);
  --green:#5C6B4F; --green-dim:rgba(92,107,79,.14);
  --red:#8A3030;   --red-dim:rgba(138,48,48,.12);
  --yellow:#8A6D3B;--yellow-dim:rgba(138,109,59,.14);
  --font-sans:'Albert Sans',-apple-system,sans-serif;
  --font-display:'Syne','Albert Sans',sans-serif;
  --font-alma:'Cormorant Garamond',Georgia,serif;
  --font-mono:'JetBrains Mono',monospace;
  --light-bg:#F2F4F3; --light-fg:#232628; --light-line:#DDE2E0;
  /* sombras K4 (neumórfico papel) */
  --k4-out: 6px 6px 14px rgba(160,152,128,.40), -6px -6px 13px #FFFFFF;
  --k4-out-hov: 9px 9px 22px rgba(160,152,128,.48), -7px -7px 15px #FFFFFF;
  --k4-in: inset 4px 4px 9px rgba(160,152,128,.48), inset -4px -4px 8px #FFFFFF;
}

body { font-family: var(--font-sans); }
.t-mega,.t-hero,.t-display,.t-h1,.t-h2,.t-h3,h1,h2,h3 {
  font-family: var(--font-display); letter-spacing:-.02em;
}
.kicker,.t-kicker { color: var(--acc); }
.calc-result .rng { color: var(--acc); }

/* ============================================================
   NAV — barra duotono "noche de tinta"
   ============================================================ */
.nav {
  background: linear-gradient(180deg,#123A3E 0%,#0E2C2F 100%);
  border-bottom: 1px solid rgba(131,183,173,.16);
  backdrop-filter: blur(10px);
}
@media (min-width:1021px){ .nav-inner { height: 78px; gap: 4px; } }
/* móvil/tablet: sello + CTA arriba, pestañas en fila con scroll horizontal */
@media (max-width:1020px){
  .nav-inner { gap: 10px 6px; }
  .nav-phone, .nav-live { display:none; }
  .re-sub { display:none; }
  .re-coin { width:40px; height:40px; }
  .re-name { font-size:18px; }
  .wordmark.re-lockup { margin-right:auto; }
  .nav-links { order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px; -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent); mask-image:linear-gradient(90deg,#000 92%,transparent); }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-item > a { white-space:nowrap; }
  .nav .btn-acc { height:42px; padding:0 18px; }
}

/* ---- sello + wordmark ---- */
.wordmark.re-lockup { display:inline-flex; align-items:center; gap:11px; margin-right:22px; }
.re-coin {
  width:46px; height:46px; border-radius:50%; flex:0 0 auto; object-fit:contain;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.30));
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.wordmark.re-lockup:hover .re-coin { transform: rotate(-6deg) scale(1.04); }
.re-wm { display:inline-flex; flex-direction:column; line-height:1; gap:4px; }
.re-name {
  font-family:'Syne',sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-.02em; color:#F2F4F3;
}
.re-name i { color:#7FD1B9; font-style:normal; }
.re-sub {
  font-family:'JetBrains Mono',monospace; font-size:8.5px; font-weight:500;
  letter-spacing:.42em; color: rgba(131,183,173,.9); text-transform:uppercase;
}

/* ---- pestañas ---- */
.nav-item > a {
  color: rgba(246,243,235,.80); font-weight:500; border-radius:99px;
  padding:9px 15px; transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.nav-item > a .car { color:#7FD1B9; }
.nav-item:hover > a, .nav-item:focus-within > a, .nav-item > a.act {
  color:#F2F4F3; background: rgba(131,183,173,.15);
}
.nav-item:hover > a .car, .nav-item:focus-within > a .car { color:#7FD1B9; }

/* ---- desplegables en papel ---- */
.drop {
  background:#FBFCFB; border:1px solid #DDE2E0; border-radius:18px;
  box-shadow: 0 26px 64px rgba(15,46,49,.18), 0 2px 6px rgba(15,46,49,.08);
}
.drop-col .hd { color:#8C9396; }
.drop-col a { color:#232628; font-weight:500; }
.drop-col a:hover { background: rgba(131,183,173,.18); color:#16181A; }

/* ---- caja de teléfono ---- */
.nav-phone {
  background: rgba(131,183,173,.12); border:1px solid rgba(131,183,173,.32);
  border-radius:99px;
}
.nav-phone .tel { color:#F2F4F3; }
.nav-phone .hrs { color: rgba(246,243,235,.62); }
.nav-live { color:#9FB89A; }
.nav-live .dot { background:#7FD1B9; }

/* ============================================================
   BOTONES — sistema K4
   Píldora en todo. Papel = neumórfico. Oscuro = degradado duotono.
   ============================================================ */
.btn {
  border-radius:99px; font-family:var(--font-sans); font-weight:700; letter-spacing:.005em;
  height:48px; padding:0 24px;
  transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .18s var(--ease-out),
              background .18s var(--ease-out), color .16s var(--ease-out);
}
.btn-sm { height:38px; padding:0 16px; }

/* Primario K4 sobre papel (petróleo prensado) */
.btn-acc, .btn.acc, .btn-p {
  background: linear-gradient(180deg,#235a60,#232628 70%);
  color:#F2F4F3; border:1px solid #163f3d;
  box-shadow: var(--k4-out), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-acc:hover, .btn.acc:hover, .btn-p:hover {
  color:#FFFFFF; transform:translateY(-1px);
  box-shadow: var(--k4-out-hov), inset 0 1px 0 rgba(255,255,255,.20);
}
.btn-acc:active, .btn.acc:active, .btn-p:active {
  transform:translateY(1px);
  box-shadow: inset 4px 4px 9px rgba(9,38,38,.55), inset -3px -3px 7px rgba(90,150,150,.22);
}

/* Secundario K4 papel (esculpido en crema) */
.btn-line, .btn-o, .btn-g {
  background: linear-gradient(180deg,#FBFCFB,#EAEEEC);
  color:#232628; border:1px solid #D4DAD8;
  box-shadow: var(--k4-out);
}
.btn-line:hover, .btn-o:hover, .btn-g:hover {
  color:#16181A; border-color:#C3CAC7; transform:translateY(-1px);
  box-shadow: var(--k4-out-hov);
}
.btn-line:active, .btn-o:active, .btn-g:active {
  transform:translateY(1px); box-shadow: var(--k4-in);
}

/* Contexto OSCURO (nav + hero foto): la píldora K4 no aplica → degradado "estrella" */
.nav .btn-acc, .heroL .btn-acc, .heroL .btn.acc,
.nav .btn-p, .heroL-cta .btn-acc {
  background: linear-gradient(115deg,#16181A 0%,#232628 52%,#1F7F68 100%);
  color:#F2F4F3; border:1px solid rgba(131,183,173,.40);
  box-shadow: 0 12px 26px rgba(9,38,38,.48), inset 0 1px 0 rgba(255,255,255,.20);
}
.nav .btn-acc:hover, .heroL .btn-acc:hover {
  transform:translateY(-1px);
  box-shadow: 0 16px 34px rgba(9,38,38,.55), 0 0 0 3px rgba(131,183,173,.16), inset 0 1px 0 rgba(255,255,255,.24);
}
.nav .btn-acc:active, .heroL .btn-acc:active { transform:translateY(1px); box-shadow: 0 6px 14px rgba(9,38,38,.5); }

/* Ghost sobre foto (hero) → contorno crema translúcido en píldora */
.heroL-ghost, .btn.ghost {
  background: rgba(246,243,235,.06); color:#F2F4F3;
  border:1px solid rgba(246,243,235,.5); box-shadow:none; backdrop-filter: blur(3px);
}
.heroL-ghost:hover, .btn.ghost:hover { border-color:#F2F4F3; background: rgba(246,243,235,.14); transform:translateY(-1px); }

/* Enlace de marca — subrayado teal que crece */
.enlace-re { color:var(--acc); font-weight:600; position:relative; }
.enlace-re::after { content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--teal); transition:right .25s var(--ease-out); }
.enlace-re:hover::after { right:0; }

/* ============================================================
   Tarjetas / secciones / detalles duotono
   ============================================================ */
.card { border-radius:18px; }
.card.hov:hover { border-color: var(--acc-border); box-shadow: 0 16px 40px rgba(15,46,49,.10); }
.mq-card { border-radius:18px; }
.tipo-chip:hover { border-color: var(--teja); color: var(--teja); }

/* corrige el glow ámbar residual del divisor antes/después */
.ba-divider { box-shadow: 0 0 22px rgba(131,183,173,.55) !important; }
.ba-tag.b { color:#16181A !important; }

/* subtítulos poéticos en Cormorant itálica cuando se marquen */
.alma { font-family: var(--font-alma); font-style: italic; color: var(--acc); }

/* ============================================================
   Animaciones · reveals (arquisma-anim.js) · reduced-motion safe
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity:0; transform:translateY(18px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--rv-delay,0ms); }
  .rv.in { opacity:1; transform:none; }
  .card.hov:hover { transform:translateY(-3px); }
  .opt { transition: all .15s cubic-bezier(.16,1,.3,1); }
  .opt.on { transform:scale(1.03); }
}