/* ─────────────────────────────────────────────────
   Confianza e Impacto · sistema editorial v4
   Inspiración: revistas culturales digitales (Apartamento, Frieze).
   Paleta: prusia (frío, principal) · burdeo claro (cálido, cita) ·
           mostaza editorial (tierra, marginalia/folio).
   ───────────────────────────────────────────────── */

:root{
  --paper:        #FFFFFF;
  --paper-2:      #F8F7F5;
  --ink:          #0D0F14;
  --ink-2:        #2A2D35;
  --ink-3:        #6F6F6F;
  --rule:         #D7D5CD;
  --rule-strong:  #0D0F14;

  --prusia:       #0F1D2D;
  --prusia-soft:  rgba(15, 29, 45, 0.16);
  --burdeo:       #5A1E2B;
  --burdeo-soft:  rgba(90, 30, 43, 0.10);
  --mostaza:      #C8A34E;
  --mostaza-soft: rgba(200, 163, 78, 0.14);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  --rail: clamp(20px, 4vw, 34px);
  --container: 1440px;
}

*{box-sizing: border-box; margin: 0; padding: 0}
html{scroll-behavior: smooth}
body{
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection{background: var(--prusia); color: var(--paper)}

/* Tipografía */
h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 380;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1{font-size: clamp(46px, 5.4vw, 88px); line-height: 0.96; letter-spacing: -0.025em}
h2{font-size: clamp(32px, 3.4vw, 52px); line-height: 1.0}
h3{font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05}
em{font-style: italic}
p{font-size: 16px; line-height: 1.6; color: var(--ink-2)}
strong{font-weight: 500; color: var(--ink)}

a{color: inherit; text-decoration: none}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--rail);
  position: relative;
}

/* ───────────────────  NAV  ─────────────────── */
nav.top{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
nav.top .nav-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--rail);
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: end;
  gap: 22px;
}
nav.top .nav-toggle{
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  padding: 0;
  position: relative;
}
nav.top .nav-toggle span{
  display: block;
  position: absolute;
  left: 9px; right: 9px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .25s, opacity .2s, top .25s;
}
nav.top .nav-toggle span:nth-child(1){top: 13px}
nav.top .nav-toggle span:nth-child(2){top: 19px}
nav.top .nav-toggle span:nth-child(3){top: 25px}
nav.top.is-open .nav-toggle span:nth-child(1){top: 19px; transform: rotate(45deg)}
nav.top.is-open .nav-toggle span:nth-child(2){opacity: 0}
nav.top.is-open .nav-toggle span:nth-child(3){top: 19px; transform: rotate(-45deg)}
nav.top .logo-wrap{display: flex; align-items: center}
nav.top .logo-wrap img{display: block; height: 38px; width: auto}
nav.top .brand-wordmark{
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 142px;
  font-family: var(--serif);
  font-size: 23px;
  line-height: .9;
  letter-spacing: -0.01em;
  color: var(--ink);
}
nav.top .brand-wordmark span:last-child{
  color: var(--prusia);
}
nav.top .nav-links{display: flex; gap: 24px; flex-wrap: wrap; align-self: end; padding-bottom: 4px}
nav.top .nav-links a{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  position: relative;
  transition: color .25s;
}
nav.top .nav-links a:hover,
nav.top .nav-links a.is-current{color: var(--prusia)}
nav.top .nav-links a.is-current::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -16px;
  height: 2px;
  background: var(--prusia);
}
nav.top .quick-cta{
  display: inline-flex;
  align-items: center;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  transition: color .25s, border-color .25s;
}
nav.top .lang-switch{
  display: inline-flex;
  align-items: center;
  padding: 0 0 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
nav.top .lang-switch:hover{color: var(--prusia); border-color: var(--prusia)}
nav.top .intranet-link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 0 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-strong);
  transition: color .25s, border-color .25s;
}
nav.top .intranet-link::after{
  content: "↗";
  font-size: 11px;
  color: var(--prusia);
  transition: transform .25s;
}
nav.top .intranet-link:hover{color: var(--prusia); border-color: var(--prusia)}
nav.top .intranet-link:hover::after{transform: translate(2px, -2px)}
nav.top .quick-cta:hover{
  background: transparent;
  color: var(--prusia);
  border-color: var(--prusia);
}

/* ───────────────────  SIDE MAP (vertical right)  ─────────────────── */
.side-map{
  position: fixed;
  right: 18px;
  top: 110px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.side-map a{
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: color .25s;
}
.side-map a:hover, .side-map a.is-current{color: var(--prusia)}

/* ───────────────────  GRID DE PÁGINA  ─────────────────── */
/* Marginalia (188) + contenido + page-num vertical (44) */
.grid-page{
  display: grid;
  grid-template-columns: 188px 1fr 44px;
  gap: 42px;
  padding: 110px 0 96px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.marginalia{
  position: sticky;
  top: 110px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--ink-3);
}
.marginalia .label{
  font-size: 10px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  margin-bottom: 4px;
}
.marginalia .value{margin-bottom: 16px}
.marginalia .rule{height: 1px; background: var(--rule); margin: 4px 0 8px}
.marginalia .accent{color: var(--mostaza)}
.marginalia .accent-prusia{color: var(--prusia)}
.marginalia .accent-burdeo{color: var(--burdeo)}

.page-num{
  position: sticky;
  top: 110px;
  height: fit-content;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
/* Cuando el side-map está visible (≥ 1181px) el page-num es redundante y se solapa.
   Lo escondemos para evitar choque. */
@media (min-width: 1181px){
  .grid-page{grid-template-columns: 188px 1fr 0; gap: 42px}
  .page-num{display: none}
}

/* ───────────────────  SECTION LABEL EDITORIAL (con § + doble línea)  ─────────────────── */
.section-label{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px double var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: 11px 0;
  margin-bottom: 32px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-2);
}
.section-label .num{color: var(--prusia)}

/* ───────────────────  HERO  ─────────────────── */
.hero-shell{
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 38px;
  align-items: start;
}
.hero-shell h1{
  font-family: var(--serif);
  font-size: clamp(52px, 5.6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 32px;
  font-weight: 380;
}
.hero-shell h1 em{font-style: italic; color: var(--prusia)}
.hero-copy{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.hero-copy .lead{
  font-family: var(--serif);
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-weight: 400;
}
.hero-copy p:not(.lead){font-size: 16px; color: var(--ink-2)}
.hero-actions{display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px}

.btn-quiet{
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 0 4px;
  transition: color .25s, border-color .25s;
}
.btn-quiet::after{content: " →"; margin-left: 6px; color: var(--prusia)}
.btn-quiet:hover{color: var(--prusia); border-color: var(--prusia)}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06)}
.btn.primary{background: var(--ink); color: var(--paper)}
.btn.primary:hover{background: var(--prusia); border-color: var(--prusia)}

.hero-visual{
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 18px;
  padding-top: 8px;
}
.hero-visual svg{display: block; width: 100%; height: auto}
.hero-symbol{
  max-width: 520px;
  opacity: .96;
}
.hero-symbol .hero-ring,
.hero-symbol .hero-zone,
.hero-symbol .hero-cross,
.hero-symbol .hero-dot{
  transform-box: fill-box;
  transform-origin: center;
}
.hero-symbol .hero-ring--impact{animation: lucid-breathe 18s ease-in-out infinite}
.hero-symbol .hero-ring--coherence{animation: lucid-breathe 22s ease-in-out infinite reverse}
.hero-symbol .hero-ring--lucidity{animation: lucid-breathe 26s ease-in-out infinite}
.hero-symbol .hero-zone{animation: lucid-drift 24s ease-in-out infinite}
.hero-symbol .hero-cross{animation: lucid-fade 16s ease-in-out infinite}
.hero-symbol .hero-dot{animation: lucid-pulse 12s ease-in-out infinite}
.hero-notes{display: flex; flex-direction: column; gap: 22px}
.hero-note h4{
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.05;
  margin-bottom: 8px;
  font-weight: 380;
  letter-spacing: -0.01em;
}
.hero-note p{font-size: 15px; color: var(--ink-2); line-height: 1.5}
.hero-note .rule{height: 1px; background: var(--rule); margin-top: 10px}

@keyframes lucid-breathe{
  0%, 100%{transform: scale(1); opacity: .86}
  50%{transform: scale(1.018); opacity: 1}
}
@keyframes lucid-drift{
  0%, 100%{transform: translate(0, 0); opacity: .42}
  50%{transform: translate(-5px, 3px); opacity: .58}
}
@keyframes lucid-fade{
  0%, 100%{opacity: .34}
  50%{opacity: .72}
}
@keyframes lucid-pulse{
  0%, 100%{transform: scale(1); opacity: .82}
  50%{transform: scale(1.22); opacity: 1}
}
@keyframes coherence-align{
  0%, 100%{stroke-dashoffset: 12; opacity: .72}
  45%, 60%{stroke-dashoffset: 0; opacity: 1}
}

/* ───────────────────  PANEL SPLIT (3 columnas con bordes)  ─────────────────── */
.panel-split{
  display: grid;
  grid-template-columns: 1.05fr 1.1fr 0.95fr;
  border-top: 1px solid var(--rule-strong);
}
.panel-split > div{
  padding: 28px 22px 24px 0;
  border-right: 1px solid var(--rule);
}
.panel-split > div:nth-child(2){padding-left: 22px}
.panel-split > div:last-child{border-right: 0; padding-right: 0; padding-left: 22px}

.big-block{
  font-family: var(--serif);
  font-size: clamp(30px, 3.0vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  font-weight: 380;
}
.big-block em{font-style: italic; color: var(--burdeo)}

.callout{
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 22px;
  margin-top: 22px;
  position: relative;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.callout strong{color: var(--ink); font-weight: 500}
.callout em{font-style: italic; color: var(--prusia)}
.callout::before, .callout::after{
  content: "";
  position: absolute;
  width: 18px; height: 18px;
}
.callout::before{
  left: -1px; top: -1px;
  border-left: 2px solid var(--prusia);
  border-top: 2px solid var(--prusia);
}
.callout::after{
  right: -1px; bottom: -1px;
  border-right: 2px solid var(--prusia);
  border-bottom: 2px solid var(--prusia);
}

/* ───────────────────  OBSERVE GRID (intro + 3 cards)  ─────────────────── */
.observe-grid{
  display: grid;
  grid-template-columns: 220px repeat(3, 1fr);
  border-top: 1px solid var(--rule-strong);
}
.observe-intro{padding: 26px 22px 22px 0; border-right: 1px solid var(--rule)}
.observe-card{padding: 26px 22px; border-right: 1px solid var(--rule)}
.observe-card:last-child{border-right: 0; padding-right: 0}
.observe-card svg{margin-bottom: 6px}
.coherence-mark .coherence-axis,
.coherence-mark .coherence-line,
.coherence-mark .coherence-point{
  transform-box: fill-box;
  transform-origin: center;
}
.coherence-mark .coherence-line{
  stroke-dasharray: 60;
  animation: coherence-align 7s ease-in-out infinite;
}
.coherence-mark .coherence-line:nth-of-type(2){animation-delay: .4s}
.coherence-mark .coherence-line:nth-of-type(3){animation-delay: .8s}
.coherence-mark .coherence-point{animation: lucid-pulse 8s ease-in-out infinite}
.stance-grid .observe-card{
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.stance-grid .observe-card:hover{
  background: var(--paper-2);
  transform: translateY(-2px);
}
.stance-grid .observe-card svg .s-line,
.stance-grid .observe-card svg .s-soft,
.stance-grid .observe-card svg .s-prusia,
.stance-grid .observe-card svg .s-burdeo,
.stance-grid .observe-card svg .s-mostaza{
  transition: stroke .3s ease, opacity .3s ease;
}
.stance-grid .observe-card:hover svg .s-soft{stroke: #CFCFCF}
.stance-grid .observe-card:hover svg .s-line{stroke: #AFAFAF}
.observe-card h3{
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 14px 0 10px;
  font-weight: 380;
}
.observe-card p{font-size: 15px; color: var(--ink-2); line-height: 1.55}
.observe-card .micro{display: flex; align-items: center; gap: 8px; margin-top: 18px}
.observe-card .micro .dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--prusia);
  background: var(--prusia);
}
.observe-card .micro .line{flex: 1; height: 2px; background: var(--rule)}

/* Variantes cromáticas para diferenciar las 3 dimensiones */
.observe-card--prusia .micro .dot{border-color: var(--prusia); background: var(--prusia)}
.observe-card--burdeo .micro .dot{border-color: var(--burdeo); background: var(--burdeo)}
.observe-card--mostaza .micro .dot{border-color: var(--mostaza); background: var(--mostaza)}

/* ───────────────────  SERVICES RAIL (5 columnas tipo periódico)  ─────────────────── */
.services-rail{
  display: grid;
  grid-template-columns: 220px repeat(5, 1fr);
  border-top: 1px solid var(--rule-strong);
}
.services-intro{padding: 26px 22px 22px 0; border-right: 1px solid var(--rule)}
.service-card{
  padding: 22px 16px;
  border-right: 1px solid var(--rule);
  position: relative;
  transition: background .25s ease;
}
.service-card:last-child{border-right: 0; padding-right: 0}
.service-card:hover{background: var(--prusia-soft)}
.service-card .step{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.service-card h3{
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 12px 0 10px;
  font-weight: 380;
}
.service-card p{font-size: 14.5px; color: var(--ink-2); line-height: 1.55}
.service-card svg{margin-bottom: 4px}

/* ───────────────────  LOWER GRID (Marco + Para quién)  ─────────────────── */
.lower-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule-strong);
}
.lower-grid > div{padding: 26px 26px 18px 0}
.lower-grid > div:last-child{padding-right: 0; padding-left: 26px; border-left: 1px solid var(--rule)}
.lower-grid h3{
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin-bottom: 14px;
  font-weight: 380;
}
.lower-grid h3 em{font-style: italic; color: var(--burdeo)}
.lower-grid p{font-size: 16px; color: var(--ink-2); line-height: 1.6; max-width: 52ch}
.lower-grid p em{font-style: italic; color: var(--ink)}

.audience-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  margin-top: 18px;
}
.aud-item{
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.aud-item::before{
  content: "";
  width: 7px; height: 7px;
  background: var(--mostaza);
  flex-shrink: 0;
}

.frame-link{
  display: inline-block;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: color .25s, border-color .25s;
}
.frame-link::after{content: " →"; margin-left: 6px; color: var(--prusia)}
.frame-link:hover{color: var(--prusia); border-color: var(--prusia)}

/* ───────────────────  STATEMENT (cita destacada con " gigante)  ─────────────────── */
.statement{
  margin-top: 22px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  display: grid;
  grid-template-columns: 40px 1fr 220px;
  gap: 18px;
  align-items: center;
  padding: 22px 26px;
}
.statement .quote{
  font-family: var(--serif);
  font-size: 44px;
  color: var(--burdeo);
  line-height: 0.85;
  font-style: italic;
}
.statement .text{
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 380;
}
.statement .text em{font-style: italic; color: var(--prusia)}
.statement svg{display: block; max-width: 100%; height: auto}

/* ───────────────────  BLOCKQUOTE EDITORIAL  ─────────────────── */
.bq{
  margin: 32px 0 16px;
  padding-left: 28px;
  border-left: 2px solid var(--burdeo);
  max-width: 56ch;
}
.bq p{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.32;
  color: var(--ink);
  font-weight: 380;
}
.bq cite{
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ───────────────────  SVG · clases reutilizables  ─────────────────── */
svg .s-line{stroke: #BCBCBC; stroke-width: 1.4; fill: none}
svg .s-soft{stroke: #DDDDDD; stroke-width: 1.1; fill: none}
svg .s-prusia{stroke: var(--prusia); stroke-width: 1.6; fill: none}
svg .s-burdeo{stroke: var(--burdeo); stroke-width: 1.6; fill: none}
svg .s-mostaza{stroke: var(--mostaza); stroke-width: 1.6; fill: none}
svg .f-prusia-fill{fill: var(--prusia-soft)}
svg .f-burdeo-fill{fill: var(--burdeo-soft)}
svg .f-mostaza-fill{fill: var(--mostaza-soft)}
svg .f-prusia{fill: var(--prusia)}
svg .f-burdeo{fill: var(--burdeo)}
svg .f-mostaza{fill: var(--mostaza)}
svg .f-ink{fill: var(--ink)}
svg .dashed{stroke-dasharray: 4 4}
svg .dotted{stroke-dasharray: 2 8}
svg text.label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--ink-3);
}

/* ───────────────────  FOOTER  ─────────────────── */
footer{
  padding: 84px 0 28px;
  background: var(--ink);
  color: var(--paper);
  border-top: 6px solid var(--mostaza);
  margin-top: 0;
}
footer .footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--rail);
  display: grid;
  grid-template-columns: 188px 1fr 44px;
  gap: 42px;
}
footer .footer-marg{
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.8;
}
footer .footer-marg .label{
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  margin-bottom: 4px;
}
footer .footer-marg .value{margin-bottom: 14px}
footer .footer-marg .rule{height: 1px; background: rgba(255, 255, 255, 0.15); margin: 4px 0 8px}
footer .footer-page{
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
@media (min-width: 1181px){
  footer .footer-inner{grid-template-columns: 188px 1fr 0; gap: 42px}
  footer .footer-page{display: none}
}
footer .footer-main .label-row{
  display: flex;
  justify-content: space-between;
  border-top: 3px double rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 11px 0;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
}
footer .footer-main .label-row .num{color: var(--mostaza)}
footer .footer-main h3{
  font-family: var(--serif);
  font-size: clamp(36px, 3.8vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  margin-bottom: 24px;
  color: var(--paper);
  font-weight: 380;
}
footer .footer-main h3 em{font-style: italic; color: var(--mostaza)}
footer .footer-main .email{
  font-family: var(--serif);
  font-size: 26px;
  color: var(--paper);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: color .25s, border-color .25s;
  font-weight: 380;
}
footer .footer-main .email:hover{color: var(--mostaza); border-color: var(--mostaza)}
footer .footer-cols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
footer .footer-cols h4{
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
}
footer .footer-cols ul{list-style: none}
footer .footer-cols li{
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.85;
  font-weight: 380;
}
footer .footer-cols a{color: var(--paper); transition: color .25s}
footer .footer-cols a:hover{color: var(--mostaza)}
footer .footer-bottom{
  margin-top: 50px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}

/* ───────────────────  EMAIL CARD (en /contacto)  ─────────────────── */
.email-card{
  margin-top: 16px;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: var(--paper);
  max-width: 100%;
}
.email-card__addr{
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: var(--ink);
  padding: 22px 28px;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.email-card__addr:hover{color: var(--burdeo)}
.email-card__copy{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  background: var(--paper);
  border: 0;
  padding: 0 22px;
  cursor: pointer;
  min-width: 100px;
  transition: background .25s, color .25s;
}
.email-card__copy:hover{background: var(--ink); color: var(--paper)}
.email-card__copy.is-ok{background: var(--prusia); color: var(--paper)}
@media (max-width: 540px){
  .email-card{flex-direction: column}
  .email-card__addr{border-right: 0; border-bottom: 1px solid var(--rule)}
  .email-card__copy{padding: 14px 22px}
  nav.top .intranet-link{font-size: 9.5px; letter-spacing: 0.1em}
  nav.top .lang-switch{font-size: 9.5px; letter-spacing: 0.1em}
  nav.top .quick-cta{font-size: 9.5px; letter-spacing: 0.1em}
}

/* ───────────────────  RESPONSIVO  ─────────────────── */
@media (max-width: 1180px){
  .side-map{display: none}
  .grid-page, footer .footer-inner{grid-template-columns: 1fr; gap: 24px}
  .marginalia, .page-num, footer .footer-page{position: static; writing-mode: initial; transform: none}
  .hero-shell, .panel-split, .observe-grid, .services-rail, .lower-grid, .statement{grid-template-columns: 1fr}
  .panel-split > div, .observe-card, .observe-intro, .service-card, .services-intro, .lower-grid > div{
    border-right: 0 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid var(--rule);
  }
  .hero-copy, .hero-visual, .audience-grid{grid-template-columns: 1fr}
  .hero-visual{margin-top: 36px}
  .hero-visual .hero-notes{order: -1}
  .statement{padding: 22px}
}
@media (max-width: 760px){
  nav.top .nav-inner{
    grid-template-columns: 1fr auto auto auto auto;
    align-items: center;
    gap: 12px;
  }
  nav.top .nav-toggle{display: block}
  nav.top .intranet-link::after{display: none}
  nav.top .nav-links{
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    gap: 14px;
    padding: 18px 0 6px;
    border-top: 1px solid var(--rule);
    margin-top: 12px;
  }
  nav.top.is-open .nav-links{display: flex}
  nav.top .nav-links a.is-current::after{display: none}
  nav.top .nav-links a{font-size: 12px}
  .hero-shell h1{font-size: 56px}
  footer .footer-cols{grid-template-columns: 1fr}
}
@media (prefers-reduced-motion: reduce){
  .hero-symbol .hero-ring,
  .hero-symbol .hero-zone,
  .hero-symbol .hero-cross,
  .hero-symbol .hero-dot,
  .coherence-mark .coherence-line,
  .coherence-mark .coherence-point{
    animation: none !important;
  }
  .stance-grid .observe-card:hover{transform: none}
}

/* ───────────────────  INTRANET SHELL  ─────────────────── */
.intranet-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
}
@media (min-width: 900px){.intranet-shell{grid-template-columns: 1.08fr 0.92fr}}
.intranet-shell .left{
  background: var(--paper);
  color: var(--ink);
  padding: 64px var(--rail);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  border-right: 1px solid var(--rule);
}
.intranet-shell .left h1{
  color: var(--ink);
  font-size: clamp(42px, 5vw, 68px);
  max-width: 15ch;
}
.intranet-shell .left .why{
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
  margin-top: 24px;
  max-width: 46ch;
}
.intranet-shell .left .legal{
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.instrument-map{
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 34px 0 6px;
}
.instrument-map text.label{font-size: 9px}
.tool-list-dark{
  display: grid;
  gap: 0;
  margin-top: 42px;
  border-top: 3px double var(--rule-strong);
}
.tool-list-dark .item{
  display: grid;
  grid-template-columns: 44px 82px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.tool-list-dark .item .viz{
  width: 82px;
  height: 64px;
  margin-top: 2px;
}
.tool-list-dark .item .num{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--ink-3);
  min-width: 36px;
}
.tool-list-dark .item .viz .s-accent{stroke: var(--rule-strong); stroke-width: 1.4; fill: none}
.tool-list-dark .item .viz .s-data{stroke: var(--prusia); stroke-width: 1.5; fill: none}
.tool-list-dark .item .viz .s-warm{stroke: var(--mostaza); stroke-width: 1.4; fill: none}
.tool-list-dark .item .viz .f-data{fill: var(--prusia)}
.tool-list-dark .item .viz .f-warm{fill: var(--mostaza)}
.tool-list-dark .item .viz .f-burdeo{fill: var(--burdeo)}
.tool-list-dark .item .viz .f-soft{fill: var(--prusia-soft)}
.tool-list-dark .item .name{
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05;
  color: var(--ink);
}
.tool-list-dark .item .desc{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .08em;
  line-height: 1.5;
  margin-top: 8px;
}
@media (max-width: 720px){
  .tool-list-dark .item{
    grid-template-columns: 44px 1fr;
    gap: 10px;
  }
  .tool-list-dark .item .viz{
    grid-column: 2;
    width: 72px;
    height: 54px;
    margin: 2px 0 6px;
  }
  .tool-list-dark .item > div{
    grid-column: 2;
  }
}
.intranet-shell .right{
  padding: 64px var(--rail);
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(15,29,45,.025), transparent 42%),
    var(--paper-2);
}
.intranet-shell .right .form-card{
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 3px double var(--rule-strong);
}
.intranet-shell .right h2{font-size: 42px; margin-bottom: 8px}
.intranet-shell .right .help{color: var(--ink-3); font-size: 15px; margin-bottom: 32px; max-width: 38ch}
.field{margin-bottom: 18px}
.field label{display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase}
.field input{width: 100%; font-family: var(--sans); font-size: 15px; padding: 14px 16px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 0}
.field input:focus{outline: none; border-color: var(--ink)}
.btn.ghost{background: transparent; color: var(--ink); border-color: var(--rule)}
.btn.ghost:hover{border-color: var(--ink); color: var(--ink); background: var(--paper)}
.divider{display: flex; align-items: center; gap: 12px; margin: 28px 0; color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em}
.divider::before, .divider::after{content: ""; flex: 1; height: 1px; background: var(--rule)}
.guest-note{margin-top: 14px; font-size: 13px; color: var(--ink-3); line-height: 1.6}
/* Wordmark intranet */
.top-mark{margin-bottom: 48px}
a.wordmark{display: flex; flex-direction: row; align-items: center; gap: 12px; text-decoration: none; color: var(--ink)}
.wordmark-text{display: flex; flex-direction: column; gap: 2px}
.wordmark-text span{font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: -0.01em; line-height: .92}
.wordmark-text span:nth-child(2){color: var(--prusia)}
.wordmark-text .lucida{font-style: italic}
.wordmark-text .descriptor{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}
/* Fundador layout (foto + texto) */
.fundador-layout{display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; max-width: 72ch}
.fundador-foto{margin: 0; padding: 0; flex-shrink: 0}
.fundador-foto img{width: 100%; display: block; filter: grayscale(18%) contrast(1.02); border: 1px solid var(--rule)}
@media (max-width: 768px){
  .fundador-layout{grid-template-columns: 1fr; gap: 28px}
  .fundador-foto{max-width: 200px}
}