/* ===================================================================
   NOESIS · A.I. Advisory — Base de estilo v2 (web)
   Extiende brand.css (Marca/brand.css). No lo reemplaza: brand.css
   sigue siendo la referencia para papelería / documentos internos.
   Esta hoja es la base para el sitio web y usa Archivo en vez de
   Helvetica Neue, porque Helvetica Neue no existe fuera de macOS/iOS
   y en Windows cae de vuelta a Arial sin avisar.

   Decisión de paleta (8 sep 2026): acento cobre, aplicado SOLO a
   elementos de interfaz. El símbolo y el wordmark se mantienen
   siempre en tinta (o papel invertido) — nunca en color de acento.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root{
  /* Base heredada de brand.css — sin cambios */
  --noesis-ink:      #0A0A0A;
  --noesis-gray:      #8A8A8A;
  --noesis-paper:     #FFFFFF;
  --noesis-hairline:  #E6E6E6;
  --noesis-mist:      #F5F5F5;

  /* Gris de texto — más oscuro que --noesis-gray a propósito.
     --noesis-gray (#8A8A8A) da 3.45:1 sobre blanco: pasa para bordes/
     decoración pero NO para texto pequeño (WCAG AA pide 4.5:1).
     Este token (#707070) da 4.95:1 y se usa en cualquier texto gris
     de tamaño chico (eyebrows, nav sin hover, etiquetas). */
  --noesis-gray-text: #707070;

  /* Acento — cobre. Único color permitido fuera de la escala de grises. */
  --noesis-accent:      #A6672E;
  --noesis-accent-soft: #F3E7DA;  /* fondo tenue para hover / fondos de tarjeta */
  --noesis-accent-dark: #D9A06B;  /* versión clara del acento sobre fondo tinta */

  /* Tipografía — Archivo sustituye a Helvetica Neue como fuente real y cargable. */
  --noesis-font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --noesis-weight-light:   300;
  --noesis-weight-regular: 400;
  --noesis-weight-medium:  500;

  --noesis-tracking-wordmark: 0.30em;
  --noesis-tracking-eyebrow:  0.22em;
  --noesis-space: 1.5rem;

  /* Movimiento — timings compartidos para que todo el sitio se sienta
     como un solo sistema, no como efectos sueltos. */
  --noesis-ease: cubic-bezier(.22,.61,.36,1);
  --noesis-fast: .25s;
  --noesis-slow: .6s;
  --noesis-orbit-speed: 40s; /* velocidad de giro del símbolo, muy lenta y ambiental */
}

@media (prefers-reduced-motion: reduce){
  :root{ --noesis-orbit-speed: 0s; }
}

/* ---------- Regla del logo: SIEMPRE monocromo ---------- */
.noesis-symbol .ring{ stroke: var(--noesis-ink); }
.noesis-symbol .dot{ fill: var(--noesis-ink); }
.noesis-dark .noesis-symbol .ring{ stroke: var(--noesis-paper); }
.noesis-dark .noesis-symbol .dot{ fill: var(--noesis-paper); }
.noesis-symbol--spin{
  animation: noesis-orbit var(--noesis-orbit-speed) linear infinite;
  transform-origin:50% 50%;
}
@keyframes noesis-orbit{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* ---------- El acento SOLO vive aquí ---------- */
.noesis-accent-text{ color: var(--noesis-accent); }
.noesis-accent-bg{ background: var(--noesis-accent); }
.noesis-accent-soft-bg{ background: var(--noesis-accent-soft); }

a.noesis-link{
  color: var(--noesis-ink); text-decoration:none;
  border-bottom:1px solid var(--noesis-gray);
  transition: color var(--noesis-fast) var(--noesis-ease), border-color var(--noesis-fast) var(--noesis-ease);
}
a.noesis-link:hover{ color: var(--noesis-accent); border-color: var(--noesis-accent); }

.noesis-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 26px; border:1px solid var(--noesis-ink); color:var(--noesis-ink);
  text-decoration:none; background:transparent;
  transition: background var(--noesis-fast) ease, color var(--noesis-fast) ease, border-color var(--noesis-fast) ease;
}
.noesis-cta:hover{ background:var(--noesis-accent); border-color:var(--noesis-accent); color:#fff; }

.noesis-card{
  transition: transform var(--noesis-fast) var(--noesis-ease), background var(--noesis-fast) var(--noesis-ease);
}
.noesis-card:hover{ transform: translateY(-4px); background: var(--noesis-accent-soft); }

/* ---------- Revelado al hacer scroll ---------- */
.noesis-reveal{
  opacity:1; transform:none; /* estado de reposo visible por defecto */
}
.js-motion .noesis-reveal{
  opacity:0; transform:translateY(18px);
  transition: opacity var(--noesis-slow) var(--noesis-ease), transform var(--noesis-slow) var(--noesis-ease);
}
.js-motion .noesis-reveal.is-in{ opacity:1; transform:translateY(0); }

/* ---------- Base tipográfica (igual espíritu que brand.css) ---------- */
html,body{
  background:var(--noesis-paper); color:var(--noesis-ink);
  font-family:var(--noesis-font); font-weight:var(--noesis-weight-light);
  line-height:1.6; -webkit-font-smoothing:antialiased; letter-spacing:.01em;
}
h1,h2,h3,h4{ font-weight:var(--noesis-weight-light); color:var(--noesis-ink); letter-spacing:.02em; line-height:1.25; margin:0 0 .6em; }

.noesis-eyebrow{
  font-size:.72rem; letter-spacing:var(--noesis-tracking-eyebrow); text-transform:uppercase;
  color:var(--noesis-gray-text); font-weight:var(--noesis-weight-light);
}
.noesis-wordmark{ font-weight:var(--noesis-weight-light); letter-spacing:var(--noesis-tracking-wordmark); text-transform:uppercase; }

.noesis-dark{ background:var(--noesis-ink); color:var(--noesis-paper); }
.noesis-dark .noesis-eyebrow{ color:#B8B8B8; }
.noesis-dark .noesis-cta{ border-color:var(--noesis-paper); color:var(--noesis-paper); }
.noesis-dark .noesis-cta:hover{ background:var(--noesis-accent-dark); border-color:var(--noesis-accent-dark); color:var(--noesis-ink); }
/* Los encabezados heredan --noesis-ink (negro) de la regla global de arriba.
   Sobre fondo oscuro eso es texto negro sobre negro, invisible. */
.noesis-dark h1,.noesis-dark h2,.noesis-dark h3,.noesis-dark h4{ color:var(--noesis-paper); }