/* YatesNuevos · tokens de marca v1.3 (septiembre 2026)
   Única fuente de verdad del color y la tipografía. No escribir hex sueltos fuera de este archivo. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* Color primario */
  --yn-profundo: #0B2B33;
  --yn-laguna:   #0A7A78;
  --yn-espuma:   #F2F1EC;
  /* Color secundario */
  --yn-bajamar:  #8FDCD2;
  --yn-arena:    #E4D8C4;
  /* Acento: solo botones de acción y detalles */
  --yn-sol:      #F2B441;
  /* Neutro */
  --yn-bruma:    #5B7075;

  /* Derivados de uso (mismos colores, con transparencia) */
  --yn-linea:          color-mix(in srgb, var(--yn-bruma) 32%, transparent);
  --yn-linea-oscura:   color-mix(in srgb, var(--yn-bajamar) 24%, transparent);
  --yn-velo-profundo:  color-mix(in srgb, var(--yn-profundo) 72%, transparent);

  /* Niveles de verificación del índice (v1.3) */
  --yn-nivel-seleccion-fondo:  var(--yn-profundo);
  --yn-nivel-seleccion-texto:  var(--yn-espuma);
  --yn-nivel-seleccion-marca:  var(--yn-bajamar);
  --yn-nivel-operacion-fondo:  var(--yn-profundo);
  --yn-nivel-operacion-texto:  var(--yn-espuma);
  --yn-nivel-operacion-marca:  var(--yn-bajamar);
  --yn-nivel-operacion-apagado: var(--yn-bruma);
  --yn-nivel-directorio-fondo: var(--yn-arena);
  --yn-nivel-directorio-texto: var(--yn-profundo);
  --yn-nivel-directorio-marca: var(--yn-bruma);

  /* Tipografía */
  --yn-titular: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --yn-texto:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --yn-voz:     "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Escala tipográfica */
  --yn-t-xxl: clamp(2.6rem, 7.2vw, 5.4rem);
  --yn-t-xl:  clamp(2rem, 4.4vw, 3.2rem);
  --yn-t-l:   clamp(1.5rem, 2.6vw, 2.1rem);
  --yn-t-m:   clamp(1.15rem, 1.5vw, 1.35rem);
  --yn-t-s:   1rem;
  --yn-t-xs:  0.875rem;

  /* Ritmo */
  /* Esquinas v1.4: siempre redondas, nunca cuadradas. Radio interior = radio exterior − relleno. */
  --yn-r-etiqueta: 8px;     /* etiquetas de nivel, contadores, insignias pequeñas */
  --yn-r-bloque: 12px;      /* campos, selectores, listas, chips y bloques dentro de una barra o tarjeta */
  --yn-r-tarjeta: 16px;     /* tarjetas, imágenes, video, tablas y avisos */
  --yn-r-barra: 18px;       /* barras de búsqueda y paneles grandes */
  --yn-r-pastilla: 999px;   /* botones (acción y contorno) */
  --yn-r: var(--yn-r-tarjeta);  /* alias del kit v1.3, que valía 4 px: ya no existe el radio cuadrado */
  --yn-ancho: 1180px;       /* ancho máximo de contenido */
  --yn-medida: 68ch;        /* medida de lectura */
  --yn-aire: clamp(3.5rem, 8vw, 7rem);
  --yn-flotacion: 6px;      /* grosor de la línea de flotación en layouts */
}

/* Clases de marca */
.yn-display { font-family: var(--yn-titular); font-stretch: 125%; font-weight: 600; letter-spacing: -.012em; line-height: 1.04; }
.yn-voz     { font-family: var(--yn-voz); font-style: italic; font-weight: 400; line-height: 1.05; }
.yn-dato    { font-family: var(--yn-texto); font-stretch: 112%; font-weight: 500; font-variant-numeric: tabular-nums; }
.yn-cta     { display:inline-flex; align-items:center; gap:.6em; background: var(--yn-sol); color: var(--yn-profundo);
               font-family: var(--yn-texto); font-stretch:112%; font-weight: 600; padding: .95em 1.6em;
               border-radius: var(--yn-r-pastilla); text-decoration:none; }
.yn-cta:hover { background: #E9A62A; }
.yn-cta:focus-visible { outline: 3px solid var(--yn-laguna); outline-offset: 3px; }
.yn-flotacion { border-top: var(--yn-flotacion) solid var(--yn-espuma); }

/* Selector de idioma: sin banderas, sin Sol */
.yn-idioma      { display:inline-flex; gap:8px; }
.yn-idioma a    { font-family: var(--yn-texto); font-stretch:112%; font-weight:600; font-size:.8125rem; letter-spacing:.10em;
                  padding:.35em .7em; border-radius: var(--yn-r-etiqueta); text-decoration:none;
                  color: var(--yn-bruma); border:1.5px solid var(--yn-linea); }
.yn-idioma a[aria-current="true"] { background: var(--yn-profundo); color: var(--yn-espuma); border-color: var(--yn-profundo); }