/* ===========================================================================
   HOLLY MERVAL — el sistema visual, en un solo lugar.

   POR QUÉ EXISTE ESTE ARCHIVO. Hasta el 2026-09-17 cada superficie definía su
   propia paleta: la landing tenía la suya, el panel la suya, el PDF la suya y
   el mail otra. Eso no es un sistema, son cuatro páginas que se parecen por
   casualidad — y la casualidad dura hasta que alguien toca una sola.

   LA DIRECCIÓN, Y POR QUÉ CAMBIÓ. La identidad anterior era una terminal:
   fondo negro, celeste y verde neón, monoespaciada para las cifras, cinta de
   tickers. Es el aspecto que produce por defecto cualquier modelo de lenguaje
   cuando le piden algo "financiero y moderno", y se notaba. Ningún research de
   verdad se ve así: Latin Securities, Don Cap o el Eye on the Market de JP
   Morgan son papel claro, tinta oscura y tipografía sobria.

   Las cuatro reglas que ordenan todo lo de abajo:

     1. PAPEL, NO PANTALLA. Fondo hueso, tinta casi negra. Ni blanco puro ni
        negro puro: los dos son duros y los dos son el default de todo el mundo.

     2. SERIF PARA LEER, GROTESCA PARA MIRAR. El texto va en Source Serif 4
        —Adobe la hizo para lectura larga—; la grotesca queda para etiquetas,
        cifras y todo lo que se escanea en vez de leerse. La monoespaciada no
        está: una tipografía de programar mostrando precios es la firma del
        asunto.

     3. UN SOLO ACENTO. El celeste aparece una vez por bloque visual, y casi
        siempre en el filete del isotipo. Un acento que se repite deja de serlo.

     4. EL COLOR SEÑALA DIRECCIÓN, Y NADA MÁS. Rojo la baja, verde la suba —
        la convención de toda la vida, que se lee sin aprenderla. Pero se pinta
        SOLO LA VARIACIÓN: el precio va siempre en tinta, porque no tiene
        dirección y ponerle color obliga al ojo a procesarlo al pedo.

   =========================================================================== */

:root{
  /* --- superficie ------------------------------------------------------- */
  --papel:       #FBFAF7;   /* fondo por defecto de todo */
  --papel-hondo: #F4F2EC;   /* bloques que necesitan separarse del fondo */
  --tinta:       #1A1A18;   /* todo el texto principal */
  --tinta-suave: #55554F;   /* secundario: bajadas, descripciones */
  --tinta-tenue: #8C8C85;   /* terciario: etiquetas, pies, metadatos */

  /* --- filetes ---------------------------------------------------------- */
  --filete:      #DAD8D0;   /* separación normal */
  --filete-firme:#1A1A18;   /* separación que corta de verdad */

  /* --- marca ------------------------------------------------------------ */
  /* El celeste del manual calculado para fondo claro. El #74C0DC original
     está calculado sobre negro y sobre papel no contrasta lo suficiente. */
  --marca:       #2F8FC4;
  --marca-hondo: #1F6A95;   /* hover */
  --marca-velo:  rgba(47,143,196,.06);

  /* --- semántica de dirección ------------------------------------------- */
  /* Rojo de imprenta, apagado. El #E0563C del manual grita sobre papel. */
  --baja:        #A33326;
  /* El verde de suba. Salió del sistema el 17 de septiembre y volvió el 18,
     por decisión del dueño: la convención financiera de rojo y verde se lee de
     un vistazo y no hay que aprenderla.

     Lo que SÍ se mantiene de aquella vuelta es la separación: el PRECIO va
     siempre en tinta y solo la VARIACIÓN se pinta. Pintar las dos cosas es lo
     que convertía la tabla en un semáforo, porque obligaba al ojo a procesar
     color en cada cifra en vez de solo donde hay dirección.

     Verde de imprenta, del mismo peso que el rojo: el #5FB98A del manual está
     calculado sobre negro y sobre papel queda lavado. */
  --suba:        #2A6B4A;

  --ancho:       1080px;
}

/* --- tipografía -----------------------------------------------------------
   Dos familias y tres funciones. Si hace falta una cuarta voz, casi siempre
   lo que falta es jerarquía de tamaño, no otra tipografía. */

body{
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.58;
  background: var(--papel);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

/* LOS TÍTULOS VAN EN CAJA BAJA. Las versales condensadas con tracking ajustado
   son un gesto de diseñador aplicado a todo por igual, y cuando aparecen en
   cada encabezado de la página delatan el armado más que cualquier palabra. */
h1, h2, h3, h4{
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.005em;
  text-transform: none;
}

h1{ font-size: clamp(30px, 5.2vw, 50px); }
h2{ font-size: clamp(23px, 3.4vw, 32px); }
h3{ font-size: 19px; }

/* La bajada en itálica: recurso editorial, y una de las pocas cosas que una
   máquina no usa por su cuenta. */
.bajada{
  font-style: italic;
  color: var(--tinta-suave);
  font-size: 1.06em;
}

/* La grotesca, solo para lo que se escanea. */
.dato, .etiqueta, .cifra{
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

.etiqueta{
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

strong{ font-weight: 600; }

/* --- isotipo --------------------------------------------------------------
   Dos letras y un filete del ancho exacto de las letras. El manual lo define
   sobre negro; esta es su versión de papel. */
.isotipo{
  display: inline-block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1;
  color: var(--tinta);
}
.isotipo::after{
  content: "";
  display: block;
  height: 2px;
  background: var(--marca);
  margin-top: .3em;
}

/* --- enlaces --------------------------------------------------------------
   Subrayado tenue en reposo y firme al pasar: el link se ve sin tener que
   pintarlo de otro color, que es lo que llena la página de acentos. */
a{ color: inherit; text-decoration: none; }

.enlace{
  border-bottom: 1px solid var(--filete);
  transition: border-color .16s ease, color .16s ease;
}
.enlace:hover{ color: var(--marca); border-color: var(--marca); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--marca);
  outline-offset: 3px;
}

/* --- botones --------------------------------------------------------------
   UNO SOLO POR PANTALLA, lleno. El resto son enlaces. Tres rectángulos de
   color compitiendo es lo que hace que una página parezca una plantilla. */
.boton{
  display: inline-block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;
  padding: 13px 26px;
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--tinta);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.boton:hover{ background: var(--marca); border-color: var(--marca); }

.boton-tenue{
  background: transparent;
  color: var(--tinta);
}
.boton-tenue:hover{ background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* --- filetes --------------------------------------------------------------
   La separación se hace con una línea, no con una caja. Las tarjetas con
   sombra y esquina redondeada son el vocabulario de plantilla del que esto se
   está despegando. */
.filete{ border-top: 1px solid var(--filete); }
.filete-firme{ border-top: 1px solid var(--filete-firme); }

/* --- variación ------------------------------------------------------------ */
.baja{ color: var(--baja); }
.suba{ color: var(--suba); }
/* El precio NO lleva ninguna de las dos: va en tinta. */
.cifra{ color: var(--tinta); }

/* --- accesibilidad -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior: auto; }
}