/* ============================================================================
   marca.css — la identidad de Norte Finanzas, en un solo lado.
   Si acá cambia un color, cambia en todo el sitio y en la demo.

   La paleta venía de la propuesta en PDF y de las maquetas. Desde el 31 de
   agosto de 2026 —cuando se borraron la propuesta y su script, y quedó una
   sola maqueta— **este archivo es la fuente de la paleta**: si alguna vez hay
   que reponer los colores en otro lado, se copian de acá.
   ========================================================================= */

:root{
  /* ---- paleta ---- */
  --ink:     #131C2B;   /* azul casi negro — el color de la marca      */
  --ink2:    #2A3849;   /* texto de párrafo                            */
  --paper:   #F6F4F0;   /* el fondo crema del papel                    */
  --line:    #E3DED6;   /* líneas y bordes                             */
  --line2:   #EFEBE4;   /* líneas más suaves                           */
  --muted:   #6B7688;   /* texto secundario                            */
  --gold:    #8A6D2F;   /* el dorado de los acentos                    */
  --goldlt:  #E3D5B0;   /* dorado claro, para texto sobre azul         */
  --goldbg:  #FAF5E8;   /* fondo de las cajas doradas                  */
  --goldln:  #E4D6B0;   /* borde de las cajas doradas                  */
  --green:   #16704F;   /* lo que está bien                            */
  --greenbg: #EFF6F2;
  --clay:    #9C3B2A;   /* lo que está mal                             */
  --claybg:  #FBF1EE;
  --white:   #FFFFFF;
  --sidetx:  #8E9AAA;   /* texto apagado sobre azul                    */

  /* ---- tipografía ---- */
  --serif: "Caladea", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- medidas ---- */
  --ancho: 1080px;      /* ancho máximo del contenido */
  --angosto: 720px;     /* ancho de lectura cómoda    */
  --radio: 10px;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 700; margin: 0; line-height: 1.18; }
p { margin: 0 0 1.05em; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { color: var(--ink); font-weight: 700; }
img, svg { max-width: 100%; }

/* --------------------------------------------------------------- marca */
/* El isotipo es la brújula. El texto "Norte / FINANZAS" se compone acá con
   las mismas proporciones que el logo vectorial: Norte en serif sobre
   FINANZAS en sans espaciada. */
.marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca .brujula { width: 40px; height: 40px; flex: 0 0 auto; display: block; }
.marca .palabra { display: flex; flex-direction: column; line-height: 1; }
.marca .n1 { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--ink); letter-spacing: -0.005em; }
.marca .n2 { font-family: var(--sans); font-weight: 700; font-size: 8.4px; letter-spacing: 0.38em; color: var(--muted); margin-top: 4px; }

.marca.clara .n1 { color: var(--goldlt); }
.marca.clara .n2 { color: var(--sidetx); }

.marca.chica .brujula { width: 30px; height: 30px; }
.marca.chica .n1 { font-size: 20px; }
.marca.chica .n2 { font-size: 7px; margin-top: 3px; }

/* ------------------------------------------------------------ utilidad */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 26px; }
.angosto { max-width: var(--angosto); }

.kicker{
  font-family: var(--sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 12px;
}

.regla { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Botones ------------------------------------------------------------- */
.boton{
  display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 15px;
  padding: 13px 24px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.boton:hover { text-decoration: none; transform: translateY(-1px); }
.boton.primario  { background: var(--ink); color: var(--white); }
.boton.primario:hover { background: #1B2740; box-shadow: 0 6px 18px rgba(19,28,43,.18); }
.boton.secundario{ background: transparent; color: var(--ink); border-color: var(--line); }
.boton.secundario:hover { border-color: var(--ink); }
.boton.claro { background: var(--goldlt); color: var(--ink); }
.boton.claro:hover { background: #EFE2C4; }

/* Cajas de nota ------------------------------------------------------- */
.nota{
  background: var(--goldbg); border: 1px solid var(--goldln);
  border-radius: var(--radio); padding: 18px 20px; font-size: 15.5px; line-height: 1.58;
}
.nota .titulo{
  font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 7px;
}
.nota p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ foco accesible */
a:focus-visible, button:focus-visible, .boton:focus-visible{
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}

/* ------------------------------------------------------------ impresión */
@media print{
  body { background: var(--white); }
  .no-imprimir { display: none !important; }
}